vue 兄弟组件之间通信

<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()

posted @ 2020-06-10 17:04  Running00  阅读(467)  评论(0编辑  收藏  举报