首页 > 其他 > 详细

vue 兄弟组件之间通信

时间:2020-06-10 18:20:25      阅读:38      评论:0      收藏:0      [点我收藏+]
<template>
      <div>
            <Child1 />
             <Child2 />
      </div>
</template>
<template>
      <div @click="child1Click">
            child1
      </div>
</template>
// child1
{
      data() {
            return {
            }
      },
      methods: {
            child1Click() {
                  this.bus.$emit(‘changeChildValue‘) // 触发changeChildValue事件
            }
      }
}
<template>
      <div >
           {{value}}
      </div>
</template>
// child2
{
      data() {
            return {
                  value: ‘1‘
            }
      },
      created() {
            this.changeValue();
      },
      methods: {
            changeValue() {
                  
                  this.bus.$on(‘changeChildValue‘, () => { // on 监听changeChildValue事件
                        this.value = ‘2‘
                  })
            }
      }
}

main.js 中Vue.prototype.bus = new Vue()

vue 兄弟组件之间通信

原文:https://www.cnblogs.com/Running00/p/13086572.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!