【VUE】vue元件之間通信有幾種方式

vue元件之間通信可分為以下幾種

• props和$emit(也就是常說的父子元件通信，常用)
• $attrs和$listeners
• 中央事件總線（非父子元件間通信）
• v-model
• provide和inject
• $parent和$children
• vuex

 1.props和$emit(常用)

Vue.component('child',{
    data(){
      return {
        mymessage:this.message
      }
    },
    template:`
      <div>
        <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>
    `,
    props:['message'],//設定props屬性值，得到父元件傳遞過來的資料
    methods:{
      passData(val){
        //觸發父元件中的事件，向父元件傳值
        this.$emit('getChildData',val)
      }
    }
  })
  Vue.component('parent',{
    template:`
      <div>
        <p>this is parent compoent!</p>
        <child :message="message" v-on:getChildData="getChildData">&l