在Vue.js中,组件间通信的主要方式有:
- Props:父组件通过 props 向子组件传递数据。
html
<!-- 父组件 -->
<Child :msg="parentMsg"></Child>
<!-- 子组件 -->
<div>{{ msg }}</div> // 使用 props 接收
js
// 子组件
props: ['msg']
- $emit:子组件通过 $emit 触发事件将数据传递给父组件。
html
<!-- 子组件 -->
<button @click="$emit('update', 'some data')">Update</button>
<!-- 父组件 -->
<Child @update="onUpdate"></Child>
js
// 父组件
methods: {
onUpdate(data) {
// ...
}
}
- 自定义事件:通过事件中心来管理状态,子父组件都监听事件中心。
js
// eventHub.js
export const eventHub = new Vue()
// 父组件
created() {
eventHub.$on('update-state', (data) => {/* ... */})
}
// 子组件
methods: {
updateState() {
eventHub.$emit('update-state', { msg: 'some data' })
}
}
- Slot:通过 slot 将父组件内容插入子组件。
html
<!-- 父组件 -->
<Child>
<span>some content</span>
</Child>
<!-- 子组件 -->
<div>
<slot></slot> // 插入的内容在此显示
</div>
- Provide/Inject:父组件通过 provide 提供状态,子孙组件通过 inject 注入使用。
js
// 父组件
provide() {
return {
name: 'Vue'
}
}
// 子孙组件
inject: ['name']