Vue.js组件间通信方式总结[推荐]

通常，在使用Vue框架的业务开发中，组件不仅需要重用模板的内容，更重要的是，它们需要相互通信。组件之间的通信有三种：父子；孩子父亲；跨级别组件通信。下面，我们将总结如何在组件之间进行通信。

1.父组件到子组件通过道具进行通信

在组件中，选项道具用于声明要从父组件接收的数据。道具的值可以是两种：一种是字符串数组，另一种是对象。props中声明的数据和component data函数返回的数据的主要区别是props来自于父级，而数据中的组件是它自己的数据，它的作用域是组件本身。这两种数据可用于模板、计算属性和方法。比如下面的例子：

//父组件parent component template div class=' parent-component ' H2这是父组件/H2 ChildComponent : parent message=' parent message '/div/template script import ChildComponent from '。/child component ' export default { name : ' parent component '，Data(){ return { parent message : '这是来自父组件' }}，component 3360 { child component } }/script//subcomponent ChildComponent templatediv class=' child-component ' H2这是一个子组件/H2 H3 { { parent message } }/H3/div/template script export default { name 3: ' child component '，prop 3360[' parent message ']}/script

总结：父组件传递给子组件的数据可以写死，也可以用v-bind将道具的值和父组件的动态数据绑定。

2.子组件通过上的$ emit $与父组件通信

当子组件需要向其父组件传输数据时，它需要使用自定义事件。除了DOM事件之外，v-on指令还可以用于组件之间的自定义事件。Vue组件有一组类似于观察者模式的模式，子组件使用$emit()来触发事件，父组件使用$on()来监视子组件的事件。这里有一个例子：

//ParentComponent父组件模板div class=' parent-component' H2这是一个父组件total 3360 { { total } }/H2 child component : parent message=' parent message ' : total=' total ' @ handleAdd10=' getTotal '/div/template script import child component from '。/Child component ' export default { name : ' parent component '，data(){ return { parent message : '这是来自父组件的数据'，total:10，}}，components: { ChildComponent }，methods : { getTotal(total){ this . total=total；console . log(' parent component total : '，total)；} } }/script///child component子组件模板div class=' child-component ' H2这是子组件/H2 H3 { { parent message } }/H3 button @ click=' handlead 10 ' 10 button/button/div/template script导出默认值{ name: 'ChildComponent '，prop 3360[' parent message '，' total']，methods : { handleAdd10(){ let total=this . total 10；console . log(' ChildComponent $ emit : ')；这个。$emit('handleAdd10 '，总计)；} } }/脚本结果：

在上面的例子中，子组件有一个按钮来实现添加10的效果。子组件通过道具项从父组件接收总值。更改总数后，它通过$emit传递给父组件。父组件定义了event @ handlead10方法。sub-component $ emit()方法的第一个参数是自定义事件的名称，下面的参数是要传输的数据。相应的父组件传递getTotal(总计

3.表单子组件通过v-model(语法糖)与父组件通信

//ParentComponent更改如下**h2这是一个父组件total 3360 { { total } }/H2 childcomponent : parent message=' parent message ' : total=' total ' @ handlead 10=' gettotal '/input component v-model=' total '/* * script import input component from '。input component脚本**//InputComponent子组件模板输入类型=' text ' @ input=' update value($ event)'/模板脚本导出默认{name :' input component '，Methods : { update value(evt){ this。$ emit ('input '，evt。目标。value)} }/脚本结果如下：

在上面的例子中，因为子组件的史建明是一个特殊的输入，当使用组件的父组件时，数据总量可以被v-model绑定。这种实现也可以称为语法糖，它大大减少了父组件的代码量。

4.非父子组件通过中央事件总线进行通信

在Vue.js2.x中，建议使用一个空的Vue实例作为中心事件总线。首先，看一个例子：

//ParentComponent父组件模板div class=' parent-component ' { message } } br组件-a///div/模板脚本从' vue' let bus=newvue()导入vue；导出默认的{ name: 'ParentComponent '，data(){ return{ message: ' '，} }，Components : { component a : { template : ' button @ click=' handleclick ' transfer event/button }，方法： {handleclick () {bus。$ emit ('on-message '，来自子组件的内容-a')}}})，已安装(){bus。$ on ('on-message '，(msg)={this。message=msg});} }/脚本结果如下：

在上例中：首先创建一个没有任何内容的总线的空Vue实例，然后全局定义组件组件-a，在父组件ParentChild的生命周期挂载钩子函数中监控来自总线的事件on-message。在组件a中，单击按钮将通过总线发送事件on-message，父组件将从总线接受事件并更改message的值。

这种方法巧妙地、轻巧地实现了任意组件之间的通信，包括父子、兄弟和跨级组件。

5.状态管理和Vuex及总结

在实际业务中，经常需要跨组件共享数据。如果项目不复杂，使用总线可以简单解决问题，但使用总线只是数据管理、维护和架构设计中的一个简单组件。在大规模单页应用和多开发项目中，Vuex可以更加优雅高效地完成状态管理。

摘要

以上是边肖介绍的Vue.js组件之间的通信方式的总结[推荐]，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！