VUE 組件間通信

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>