2024年06月18日 建站教程
如何在Vue.js中使用父子组件通信？下面web建站小编给大家简单介绍一下props、$emit、ref、$parent/$children和provide/inject的使用方法！
props的用法：
js // 父组件 <Child :msg="message"></Child> // 子组件 props: ['msg'] //父组件通过 props 向子组件传递数据。子组件通过 props 接收数据。
$emit的用法：
js
// 子组件
this.$emit('someEvent', someData)
// 父组件
<Child @someEvent="doSomething"></Child>
methods: {
doSomething(someData) { ... }
}
//子组件通过 $emit 触发事件,父组件监听事件并执行逻辑。
ref的用法
js // 父组件 <Child ref="child"></Child> // 访问子组件 this.$refs.child.someData this.$refs.child.someMethod() //父组件通过 ref 获取子组件实例,然后直接访问数据或调用方法。
$parent/$children的用法
js // 子组件访问父组件 this.$parent.someData // 父组件访问子组件 this.$children[0].someMethod() //可以直接通过 $parent 访问父实例,或通过 $children 访问子实例。 //但是不推荐在真实场景下使用,$parent/$children 只适用于示例或原型。
provide/inject的用法
js
// 父组件
provide: {
name: 'hello'
}
// 子组件
inject: ['name']
//用于父子跨级通信。父组件通过 provide 提供数据,子孙组件通过 inject 注入数据。
本文链接：http://so.lmcjl.com/news/6814/