当前位置：首页 > news >正文

Vue中常见的几种组件间通信方法

news 2025/6/21 22:26:43

1.props（父传子）

父组件Parent.vue

<template><child :msg="message"></child>
</template>

父组件通过:val="value"的形式定义要传给子组件的值value绑定到val上
子组件Child.vue

export default {//写法一 用数组接收props:['msg'], //写法二 用对象接收，可以绑定接收的数据类型、设置默认值、验证等props:{msg:{type：string,default:"这是默认值"}},  created(){console.log(this.msg)}
}

子组件通过props的方法接收父组件绑定的val

2.$emit（子传父）

父组件Parent.vue

<template><p>{{num}}</p><child @getVal="getvalue()"></child>
</template>
<script>
export default { components:{child},data(){return{num=''}},methods:{getvalue(val){this.num = val}}
}
</script>

子组件Child.vue

export default { data(){return{val=1}},methods:{sendval(){this.$emit("getVal",this.val)}}
}

3.EventBus事件总线（兄弟组件间传值）

创建事件中心管理组件之间的通信

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

兄弟A通过 $emit 进行派发传值，兄弟B通过 $on 接收A的值

4、依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法,inject钩子用来接收数据或方法

provide() { return {     num: this.num  };
}
inject: ['num']

注意：依赖注入所提供的属性是非响应式的。

5、$parent / $children

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。
子组件：

<template><div><span>{{message}}</span><p>获取父组件的值为:  {{parentVal}}</p></div>
</template><script>
export default {data() {return {message: 'Vue'}},computed:{parentVal(){return this.$parent.msg;}}
}
</script>

父组件

<template><div class="hello_world"><div>{{msg}}</div><child></child><button @click="change">点击改变子组件值</button></div>
</template><script>
import child from './child.vue'
export default {components: { child },data() {return {msg: 'Welcome'}},methods: {change() {// 获取到子组件this.$children[0].message = 'JavaScript'}}
}
</script>

在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。
1.通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例
2.在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
3.在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
4.$children 的值是数组，而 $parent是个对象