VUE 组件间通信

标签：component   button   one   lse   inpu   this   add   ESS   mit   

1. 父传子

// 父组件
<note-address :data="msg"></note-address> 

//子组件

<div>{{ data.partment }}</div>

export default {
  //props:[‘data‘]
  props: {
    data: Object
  }
}

1. 子传父

//父组件
<note-address @new="addNote"></note-address> 

//子组件
<button type="small" class="confirm" @click="add">设为教案</button>

methods: {
 add () {
  this.$emit(‘new‘, false)
 }
}

1. 兄弟相传

1.创建 公共bus.js

//bus.js
import Vue from ‘vue‘
export default new Vue()

2.父组件注册两个子组件
components:{
    firstChild,
    secondChild
}

3.firstChild组件

<input type="button" value="点击触发" @click="elementByValue">

<script>
// 引入公共的bug，来做为中间传达的工具
  import Bus from ‘./bus.js‘
  export default {
      methods: {
      elementByValue: function () {
        Bus.$emit(‘val‘, ‘兄弟，收到了吗？‘)
      }
    }
  }
</script>

4.secondChild组件

<span>{{msg}}</span>

<script>
// 引入公共的bug，来做为中间传达的工具
  import Bus from ‘./bus.js‘
  export default {
      mounted(){
            let self = this;
            Bus.$on(‘val‘, function (msg) {
                console.log(msg)
                self.msg = msg
            })
      }
    }
  }
</script>

VUE 组件间通信

标签：component   button   one   lse   inpu   this   add   ESS   mit   

原文地址：https://www.cnblogs.com/yaotu/p/10273109.html