Vue.js 中的组件通信方式有哪些？

在Vue.js中,组件间通信的主要方式有:

1. Props:父组件通过 props 向子组件传递数据。

html
<!-- 父组件 -->
<Child :msg="parentMsg"></Child>

<!-- 子组件 -->
<div>{{ msg }}</div>  // 使用 props 接收

js
// 子组件
props: ['msg'] 

2. $emit:子组件通过 $emit 触发事件将数据传递给父组件。

html
<!-- 子组件 --> 
<button @click="$emit('update', 'some data')">Update</button>

<!-- 父组件 -->
<Child @update="onUpdate"></Child>

js
// 父组件
methods: {
  onUpdate(data) {
    // ...
  }  
}

3. 自定义事件:通过事件中心来管理状态,子父组件都监听事件中心。

js
// eventHub.js 
export const eventHub = new Vue()

// 父组件
created() { 
  eventHub.$on('update-state', (data) => {/* ... */})  
}

// 子组件
methods: {
  updateState() {
    eventHub.$emit('update-state', { msg: 'some data' })
  }  
} 

4. Slot:通过 slot 将父组件内容插入子组件。

html
<!-- 父组件 -->  
<Child>
  <span>some content</span>
</Child>  

<!-- 子组件 -->
<div>
  <slot></slot>   // 插入的内容在此显示 
</div>

5. Provide/Inject:父组件通过 provide 提供状态,子孙组件通过 inject 注入使用。

js
// 父组件
provide() {
  return {
    name: 'Vue'    
  }
}

// 子孙组件  
inject: ['name']