Vue非父子组件间传值

2019年3月13日11:47:15 发表评论 阅读(291)

Vue非父子组件间传值

组件通信有三种情况,父组件向子组件传值,子组件向父组件传值,这两种我们称为父子组件通信,还有一种就是非父子组件通信。

非父子组件通信

在简单的场景下,我们可以使用一个空的Vue实例作为中央事件总线,实例:

  1. <div id="root">
  2.         <child-a contenta="1"></child-a>
  3.         <child-b contentb="1"></child-b>
  4.     </div>
  5.     <script>
  6.         Vue.prototype.bus = new  Vue ()   //new一个vue实例作为中转
  7.         Vue.component('child-a',{
  8.             props: ['contenta'],
  9.             data: function () {
  10.                 return {
  11.                     tempA: this.contenta
  12.                 }
  13.             },
  14.             template: '<div @click="handleClickB">{{tempA}}</div>',
  15.             methods: {
  16.                 handleClickB: function () {
  17.                     this.bus.$emit('changeb') //触发changeb事件
  18.                 }
  19.             },
  20.             mounted: function () {
  21.                 var _this = this
  22.                 this.bus.$on('changea', function () {
  23.                     _this.tempA ++
  24.                 }) //监听changea事件并执行函数
  25.             }
  26.         })
  27.         Vue.component('child-b',{
  28.             props: ['contentb'],
  29.             data: function () {
  30.                 return {
  31.                     tempB: this.contentb
  32.                 }
  33.             },
  34.             template: '<div @click="handleClickA">{{tempB}}</div>',
  35.             methods: {
  36.                 handleClickA: function () {
  37.                     this.bus.$emit('changea') //触发changea事件
  38.                 }
  39.             },
  40.             mounted: function () {
  41.                 var _this = this  //作用域发生变化,需要把this赋值给别名
  42.                 this.bus.$on('changeb', function () {
  43.                     _this.tempB ++
  44.                 }) //监听changeb事件并执行函数
  45.             }
  46.         })
  47.         var vm = new Vue({
  48.             el: '#root'
  49.         })
  50.     </script>

代码执行的流程是,点击组件A,触发handleClickB方法,handleClickB方法触发changeb事件,组件B通过公共实例bus监听changeb事件,发现changeb事件改变了,执行事件改变后的代码this.tempB++

效果

Vue非父子组件间传值

点击A组件B组件数字发生改变,点击B组件A组件的数字发生改变。

看了上面的代码我们可以看出,只用到了两个组件就有些麻烦了,所以我们在复杂的情况下要考虑使用专门的vuex技术

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛