在 Vue.js 中，组件之间的通信方式非常丰富，下面将详细介绍几种常见的组件通信方式，并附上代码示例，包括 $attrs、$listeners、provide/inject、$parent/$children 和 ref。

目录

1. 父子组件通信

1. Props 传值

2. $emit 传值

2. 子组件获取父组件的数据和方法

1. $parent

3. 使用 refs 访问子组件

4. 兄弟组件通信

a. 使用事件总线

5. provide/inject 进行跨级通信

6. attrs 和listeners

1. $attrs

2. $listeners

7. 兄弟组件通过共同父组件传递数据

---

1. 父子组件通信

1. Props 传值

父组件通过 Props 向子组件传递数据。

示例代码：

父组件 Parent.vue：

<template>
  <div>
    <Child :message="parentMessage" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

子组件 Child.vue：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

2. $emit 传值

子组件通过 $emit 向父组件发送事件，父组件通过监听事件来处理数据。

示例代码：

子组件 Child.vue：

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageFromChild', 'Hello from Child!');
    }
  }
};
</script>

父组件 Parent.vue：

<template>
  <div>
    <Child @messageFromChild="handleMessage" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  methods: {
    handleMessage(msg) {
      console.log(msg);
    }
  }
};
</script>

2. 子组件获取父组件的数据和方法

1. $parent

子组件可以通过 $parent 访问父组件的实例。

示例代码：

父组件 Parent.vue：

<template>
  <div>
    <Child />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

子组件 Child.vue：

<template>
  <div>
    {{ $parent.parentMessage }}
  </div>
</template>

<script>
export default {};
</script>

3. 使用 refs 访问子组件

父组件可以使用 ref 获取子组件的实例，从而调用其方法或访问其数据。

示例代码：

父组件 Parent.vue：

<template>
  <div>
    <Child ref="childComponent" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

子组件 Child.vue：

<template>
  <div>Child Component</div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called!');
    }
  }
};
</script>

4. 兄弟组件通信

a. 使用事件总线

通过创建一个全局事件总线实现无关组件之间的通信。

示例代码：

创建 EventBus.js：

import Vue from 'vue';
export const EventBus = new Vue();

组件 A：

<template>
  <button @click="sendData">Send Data</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendData() {
      EventBus.$emit('dataSent', 'Hello from Component A!');
    }
  }
};
</script>

组件 B：

<template>
  <div>Data from Component A: {{ receivedData }}</div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      receivedData: ''
    };
  },
  created() {
    EventBus.$on('dataSent', (data) => {
      this.receivedData = data;
    });
  },
  beforeDestroy() {
    EventBus.$off('dataSent'); // 清除事件监听
  }
};
</script>

5. provide/inject 进行跨级通信

provide 和 inject 是 Vue.js 中用于实现跨级组件通信的一种方式。通过 provide，祖先组件可以向其所有后代组件提供数据，而通过 inject，后代组件可以接收这些数据。这种方式特别适用于需要在多个层级的组件之间共享数据的情况。

a.provide

provide 是一个函数，返回一个对象，该对象包含祖先组件希望提供给后代组件的数据。

b.inject

inject 是一个数组或对象，用于声明后代组件需要接收的数据。如果是一个数组，数组中的每个元素是祖先组件提供的键名；如果是一个对象，对象的键名是本地变量名，值是祖先组件提供的键名。

示例 1：基本用法

祖先组件 Grandparent.vue：

<template>
  <div>
    <Parent />
  </div>
</template>

<script>
import Parent from './Parent.vue';

export default {
  components: { Parent },
  provide() {
    return {
      message: 'Hello from Ancestor!'
    };
  }
};
</script>

父组件 Parent.vue：

<template>
  <div>
    <Child />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child }
};
</script>

子组件 Child.vue：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

在这个示例中，Ancestor.vue 通过 provide 提供了一个 message，Child.vue 通过 inject 接收了这个 message，并将其显示在模板中。

示例 2：使用对象形式的 inject

祖先组件 Ancestor.vue：

<template>
  <div>
    <Parent />
  </div>
</template>

<script>
import Parent from './Parent.vue';

export default {
  components: { Parent },
  provide() {
    return {
      providedMessage: 'Hello from Ancestor!'
    };
  }
};
</script>

子组件 Child.vue：

<template>
  <div>{{ injectedMessage }}</div>
</template>

<script>
export default {
  inject: {
    injectedMessage: 'providedMessage'
  }
};
</script>

在这个示例中，Ancestor.vue 通过 provide 提供了一个 providedMessage，Child.vue 通过 inject 接收了这个 providedMessage，并将其赋值给本地变量 injectedMessage。

注意事项

1. 响应性：provide 和 inject 绑定并不是响应式的。如果祖先组件提供的值发生变化，后代组件不会自动更新。如果需要响应式数据，可以使用 Vue.observable 或者 Vuex。

2. 依赖注入：provide 和 inject 主要用于开发高阶插件/组件库，不推荐用于普通应用程序代码。

6. attrs 和listeners

 在 Vue.js 中，$attrs 和 $listeners 是用于处理组件属性（attrs）和事件（listeners）的特殊对象，尤其在构建可重用的自定义组件时非常有用。以下是它们的详细介绍与示例代码。

1. $attrs

$attrs 是一个包含父作用域中传递给子组件的所有属性的对象（除了 class 和 style）。这使得子组件能够接收并使用由父组件传递的属性，而无需事先声明这些属性。

示例代码：

父组件 Parent.vue：

<template>
  <div>
    <CustomInput placeholder="Enter your name" />
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: { CustomInput }
};
</script>

子组件 CustomInput.vue：

<template>
  <input v-bind="$attrs" />
</template>

<script>
export default {
  inheritAttrs: false // 允许使用 $attrs
};
</script>

在这个示例中，父组件向 CustomInput 传递了一个 placeholder 属性。子组件通过 v-bind="$attrs" 绑定了所有未声明的属性。

2. $listeners

$listeners 是一个对象，包含了所有父组件传递给子组件的事件监听器，子组件可以通过 $listeners 修改这些事件的行为。

示例代码：

父组件 Parent.vue：

<template>
  <div>
    <CustomButton @click="handleClick">Click Me</CustomButton>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue';

export default {
  components: { CustomButton },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

子组件 CustomButton.vue：

<template>
  <button v-on="$listeners">{{ label }}</button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: 'Default Button'
    }
  }
};
</script>

在这个示例中，父组件向 CustomButton 传递了一个点击事件监听器。子组件通过 v-on="$listeners" 将所有未声明的事件监听器附加到按钮上。

注意事项

• inheritAttrs：当子组件使用 $attrs 时，通常需要将 inheritAttrs 设置为 false，以避免 Vue 自动将非 Prop 参数绑定到子组件的根元素上（例如：$attrs 会被默认绑定到根元素）。

• 监听器的使用：在使用 $listeners 时，应确保在自定义组件中将这些事件转发到根元素或合适的元素上。

7. 兄弟组件通过共同父组件传递数据

通过共同的父组件，可以实现兄弟组件之间的通信。

示例代码：

父组件 Parent.vue：

<template>
  <div>
    <SiblingA @sendData="receiveData" />
    <SiblingB :data="receivedData" />
  </div>
</template>

<script>
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

export default {
  components: { SiblingA, SiblingB },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    receiveData(data) {
      this.receivedData = data;
    }
  }
};
</script>

兄弟组件 A SiblingA.vue：

<template>
  <button @click="sendData">Send Data to Sibling B</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('sendData', 'Data from Sibling A');
    }
  }
};
</script>

兄弟组件 B SiblingB.vue：

<template>
  <div>Data from Sibling A: {{ data }}</div>
</template>

<script>
export default {
  props: {
    data: String
  }
};
</script>

总结

以上是 Vue.js 中各种组件通信方式的详细介绍与示例。在实际开发中，根据不同的需求选择合适的通信方式可以大大提高代码的可维护性和可读性。希望这些示例能够帮助你更好地理解 Vue 组件之间的通信。