非父子组件的传值

我们可以把网页拆分成很多个部分

首先是一个大的网页,然后上面是一个组件,左边也是一个组件,但是又可以拆分成2个组件,右边也是一个组件,但是也可以细分为3个组件

那么现在我想要父子组件传值可以通过:

父组件-子组件:通过props传值

子组件-父组件:通过事件触发传值

那么现在我想要第一层的组件和第三层的组件传值,如果用父子组件传值方法,那么就只能一层一层传,如果我现在想要右边的第三层组件和左边的第三层组件相互传值,也只能一层一层传递到第一层,然后再传递回来

这样做太过麻烦

那么我们可以使用 总线/Bus/发布订阅模式/观察者模式  来解决这个问题

现在想要实现的功能是当我点击Dell的时候,下面的Lee会变成Dell,点击Lee的时候,上面的Dell会变成Lee

首先是在Vue的protptype上挂载了一个名字叫做bus的属性,Vue.prototype.bus = new Vue(),这个属性指向一个Vue的实例,只要以后调用new Vue()或者创建组件的时候每一个组件上都会有一个bus属性,

既然我想要一个子组件在被点击的时候,另一个子组件的内容能够随之改变,那么先在div上写一个监听函数,<div @click="handleClick">{{content}}</div>

现在我想要往另一个组件上传递自己的信息

handleClick: function() {
                    this.bus.$emit('change', this.content);
}

this.bus 指的就是实例上挂载的bus,bus又是Vue上的实例,那么我们就可以通过¥emit这个属性来触发事件,同时携带了我们的数据,this.content

那么对于其他的组件来说,就要去监听这个change,怎么监听能,我们可以使用mounted这个生命周期钩子,也就是这个组件被挂载的时候会执行的函数

mounted: function() {
                this.bus.$on('change', function(msg) {
                    content = msg;
                });
     }

当然在写到这里的时候,

当你点击dell的时候会发现dell运行了两次

这是因为在一个child组件去触发事件的时候,两个child组件都进行了事件的监听,所以两个child都会显示这个msg

那么现在,只要我把this.content = msg 就可以了

点击完之后发现并没有什么改变,这是因为function(msg) {
                    this.content = msg;
                }

里面的this作用域发生了变化,

这样就可以了,再点击dell下面的lee就变成了dell

做完这些之后我们会发现控制台报错了

这是因为子组件的content是从父组件传过来的,但是我们却强行改变了其内容

this_.content = msg;

所以要改成下面这样子:

控制台也不会报错

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值