Vue组件通信的几种实现方法

组件通信

一般组件之间的常用通信有以下几种情况：A和B，B和C，B和D都是父子关系，C和D是兄弟组件。

有两种常见的沟通方式：

1.ref:注册元素或组件的参考信息

2.children:访问父组件和子组件的实例。

这两种方法都是通过实例直接得到的。例子如下：

//comA组件a导出默认值{ data(){ return { title : ' test communication ' } }，方法： { say hello(){ window . alert(' hello ')；}}}此处引用了组件a

template CoMa ref=' CoMa '/CoMa/template script导出默认值{ mounted () { const comA=this。$ refs.comAconsole . log(CoMa . title)；//测试通信CoMa . SayHello()；//调用组件comA}的方法} }/脚本上面的例子说明了我们使用ref来获取组件实例上的方法和数据

div id=' count ' button @ click=' show msg '显示两个组件的信息/button child 1/child 1 child 2/child 2/div模板id=' child 1 ' div { { msg } }/div/template template id=' child 2 ' div { { msg } }/div/template script vue.component(' child 1 '，{ template: '#child1 '，Data () {return {msg: '这是子组件1'}})的信息)vue.component ('child2。我喜欢这个。$ children.lengthI) {alert(这个。$孩子[我]。msg)}}})/script $ children返回所有子组件的实例，这是一个数组

div ID=' count ' msg : { { msg } } child 1 ref=' C1 '/child 1 child 2 ref=' C2 '/child 2/div模板ID=' child 1 ' div { { msg } } Button @ click=' show pmsg '显示父组件msg/Button/div/template template ID=' child 2 ' div { { msg } }/div/template scriptvue.component(' child 1 '，{template3360' # child1 '，data () {return {msg: '$ parent . msg)} })vue.component(' child 2 '，{ template: '#child2 '，Data () {return {msg: '这是子组件2 ' } })new vue({ El : ' # count '，Data : { msg 3360 ' hello parent ' })/script是基于组件上下文访问父组件或所有子组件(数组)的两种方式。这种方法有一个很大的缺点，就是不能跨级别或者兄弟之间进行通信，比如下面的结构

//parent . vuecocomponent-a/component-a component-b/component-b component-c/component-c如果我们想得到组件a中的其他组件，可能需要使用vuex或者Bus事件总线来解决。

事件总线

定义事件总线有两种方法

//bus.js事件总线从' vue '导入vue导出const $ bus=newvue ()//main.js我们定义这个事件总线Vue.prototype.$bus=new Vue()在主入口发送事件

对于下面的comA描述，将接收并显示来自父组件的参数号；有一个按钮，点击它会调用函数handleAddRandom，生成一个随机数，并调用事件总线的$emit方法，将随机数交给事件总线，事件总线会传输数据。

模板div {{number}}按钮@ click=' handleadrandom '随机添加/按钮/div/模板脚本导入$ bus自./bus.js导出默认值{name :' counter '，prop s : { Number : { type : Number } }，methods : { handleAddRandom(){ const num=math . floor(math . random()* 100 ^ 1)；console . log(' producted num : ' num)；这个。$巴士。$emit('add '，num)；} } }/脚本接收事件

模板div随机添加了：计数器： number=' number '/counter/div/模板脚本导入计数器from '。/counter ' export default { name : ' index }，components: { counter }，data() { return { number: 0 } }，methods : { handleAddRandom(num){ this . number=num；} }，创建了(){//this。$巴士。$on需要在created中使用，否则它不会生效。$巴士。$ on ('add '，这个。handleadrandom)；}，beforeDestroy() {//This。$巴士。$ off ('add '，这个。handleadrandom)需要从beforeDestroy中删除；} }/scriptstyle作用域/style以上，我们通过事件总线进行通信

那么让我们来谈谈另一种可以与Vuex相媲美的提供/注入方式

提供/注入

说到这两个API，你可能不明白。让我们举个例子

//A组件export default { provide : { name : ' aresn ' } }//b组件export default { inject :[' name ']，mounted(){ console . log(this . name)；//Arsen } }代码中，我们可以看到我们在组件a中设置了一个provide : { name:' Arsen ' }，这个方法的作用是将这个变量提供给所有的子组件。在b组件中，我们使用indect来获取这个变量，这样我们就可以使用this.name来获取这个变量。现在我们可以用一些技巧来大胆替换Vuex。(这里解释一下，不建议我们在官网使用这两个API。在一般应用中，建议在高级组件中使用它们。建议好好使用。)

使用提供/注入来预期Vuex

template div router-view/router-view/div/template script export default { }/script vue CLI会有一个app.vue作为入口组件，所以我们可以用这个API来大做文章。脚本导出默认{ provide(){ return { app : this } }，data(){ return { userinfo : null } }，Methods: {getUserInfo () {//这里，通过ajax获取用户信息后，将其分配给this.userInfo .下面是伪代码$。Ajax ('/user/info '，(数据)={this。userinfo=数据；});} }，挂载(){ this . GetUserInfo()；} }/script在这里，我们将根组件实例作为参数传递给app变量，然后通过app[变量| |方法]就可以达到vuex的目的

模板div { { app }。user info } }/div/模板脚本导出默认{inject: ['app']，methods : { change user info(){//在此处修改用户数据后，通知app.vue更新。下面是伪代码$。ajax('/user/update '，()={//app . vue中的this.app.getUserInfo()方法可以通过这个直接调用。})}} }/script，但是这样做有一个缺点，那就是可能会让根组件app.vue的代码特别臃肿。当然，有解决办法。我们可以使用mixin将不同的逻辑分别写入不同的js，然后通过mixin :[mixin _ user]在app.vue中引用这个mixin。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。