Vue组件通讯全攻略：props、$emit等8种方式

"Vue组件间通信的八种方式包括props、$emit、Vuex、Event Bus、提供/注入（provide/inject）、ref和v-model、 slots以及使用自定义指令。这些方法各有适用场景，理解并掌握它们对于Vue开发至关重要。" 在Vue.js框架中，组件之间的通信是应用构建的基础。以下是八种常见的Vue组件通信方式： 1. Props - 父子组件通信的基础方式，通过props属性将数据从父组件传递到子组件。在`Parent.vue`中，`Son1.vue`被使用，并通过`:date`属性接收父组件的数据。子组件通过`props`选项声明它接收的数据，如`date`，并可设置数据类型和默认值。 2. $emit - 子组件通过调用`$emit`方法触发自定义事件，将信息发送回父组件。在`Son1.vue`中，可以通过`$emit('changeNum', 2)`触发事件并传递参数，父组件通过监听这个事件并处理回调参数，如`$on('changeNum', params)`。 3. Vuex - 当需要在多个非直接相关的组件之间共享状态时，可以使用Vuex状态管理器。Vuex允许在一个中心化的store中存储和管理全局状态，所有组件都可以通过调用actions或mutations来改变状态。 4. Event Bus - 当不希望使用Vuex且组件间通信较为简单时，可以创建一个全局事件总线（Event Bus）来实现通信。通过实例化一个新的Vue对象作为中间件，组件可以发射事件和监听事件，从而传递数据。 5. 提供/注入（provide/inject） - Vue 2.2.0引入的特性，允许祖先组件提供数据，而子孙组件可以注入这些数据，无需通过props逐层传递。这种方式适用于非直接的父子关系。 6. ref和v-model - `ref`可以用来获取子组件的实例，进而访问和修改子组件的属性或方法。`v-model`则用于双向数据绑定，通常用于表单元素，但也可用于自定义组件。 7. Slots - Vue的插槽机制允许父组件向子组件传入内容。通过具名插槽或默认插槽，父组件可以决定子组件内部的渲染内容。 8. 自定义指令（Custom Directives） - 在某些特殊情况下，可以通过自定义指令来实现组件间的交互。自定义指令可以监听、修改DOM或数据，但通常只在必要时使用，以保持代码清晰。 理解并灵活运用这些通信方式，能够帮助开发者构建复杂且可维护的Vue应用。在实际开发中，应根据项目需求选择合适的方法。