vue 兄弟组件之前通信

标签：class   hang   pre   prototype   ted   click   ret   data   created   

<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 兄弟组件之前通信

标签：class   hang   pre   prototype   ted   click   ret   data   created   

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