Vue.js中如何使用父子组件通信？

在 Vue.js 中,父子组件通信有以下几种方式:

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

js
// 父组件
<Child :msg="message"></Child>

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

2. $emit:子组件通过 $emit 触发事件,父组件监听事件并执行逻辑。

js
// 子组件
this.$emit('someEvent', someData)

// 父组件
<Child @someEvent="doSomething"></Child>

methods: {
  doSomething(someData) { ... }  
}

3. ref:父组件通过 ref 获取子组件实例,然后直接访问数据或调用方法。

js
// 父组件  
<Child ref="child"></Child>

// 访问子组件
this.$refs.child.someData  
this.$refs.child.someMethod() 

4. $parent/$children:可以直接通过 $parent 访问父实例,或通过 $children 访问子实例。
   但是不推荐在真实场景下使用,$parent/$children 只适用于示例或原型。

js 
// 子组件访问父组件  
this.$parent.someData  

// 父组件访问子组件
this.$children[0].someMethod()  

5. provide/inject:用于父子跨级通信。父组件通过 provide 提供数据,子孙组件通过 inject 注入数据。

js
// 父组件
provide: {
  name: 'hello'  
}

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