zoukankan      html  css  js  c++  java
  • 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()

  • 相关阅读:
    第三次作业
    第二次作业
    第一次作业
    第五次作业
    第四次作业
    第三次作业
    第二次作业
    随笔
    第五次作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/Running00/p/13086572.html
Copyright © 2011-2022 走看看