元件傳參的方式：

觀察者模式（子傳父）

通過給子元件中設定方法，並在子元件例項中寫下ref=名字，

子元件中的事件裡寫下$emit(‘方法名’,’引數’)

此時父元件可以在mounted生命週期中通過this.$refs[‘名字’].$on(‘方法名’，回撥)

<!-- 觀察者模式 -->

  <div id="app">

    <son ref="son"></son>

    父親的msg: {{ msg }}

  </div>

  <script>

    Vue.component(
 
'son', {

      template: `

        <div>

          <button @click="$emit('func','我是兒子傳過來的引數')">點選兒子的按鈕，傳送給父親</button>

        </div>

      `,

      methods: {

        

      }

    })

    new Vue({

      el: '#app',

      data: {

        msg: '我是父親的msg'

      },

      mounted(){

        
 
this.$refs['son'].$on('func', (msg)=>{

          console.log(msg)

          this.msg = msg

        })

      }

    })

  </script>

釋出訂閱模式：釋出訂閱模式：父傳子，子傳父或者兄弟之間傳參

需要引入

<scriptsrc="https://cdn.bootcdn.net/ajax/libs/pubsub-js/1.8.0/pubsub.min.js"></script>

釋出訊息時：PubSub.publish(‘方法名’，

訂閱時：PubSub.subscribe（‘方法名’，（e,msg）=>{}）

釋出訊息後，訂閱者接受訊息時的方法名必須與釋出時的訂閱名保持一致即可收到傳過來的資料

 <!-- 釋出訂閱模式 -->

  <div id="app">

    我是父親的msg: {{msg}}

    <button @click="parentsendmsg">父親裡面的按鈕</button>

    <coma></coma>

    <comb></comb>

  </div>

  <script>

    Vue.component('coma', {

      template: `

        <div>

          <button @click="sendMsg">點選coma</button>

        </div>

      `,

      methods: {

        sendMsg(){

          // 釋出

          PubSub.publish('send', '我是coma傳過來的訊息')

        }

      }

    })

    Vue.component('comb', {

      template: `

        <div>

          <p>comb：{{ msg }}</p>

          <p>comb: {{ title }}</p>

        </div>

      `,

      data() {

        return {

          msg: '我是comb裡面的msg',

          title: '我是comb裡面的title'

        }

      },

      mounted(){

        // 訂閱

        PubSub.subscribe('send', (e, msg)=>{

          // console.log(msg)

          this.msg = msg

        })

        PubSub.subscribe('parendsend', (e,msg)=>{

          this.title = msg

        })

      }

    })

    new Vue({

      el: '#app',

      data: {

        msg: '我是父親的msg'

      },

      methods:{

        parentsendmsg(){

          PubSub.publishSync('parendsend', '我是父親傳過來的訊息')

        }

      },

      mounted(){

        PubSub.subscribe('send' ,(e, msg)=>{

          console.log(msg)

          this.msg  = msg

        })

      }

    })

  </script>

事件匯流排傳參：在vue原型上面寫一個事件匯流排屬性，指向vue的例項化物件

 <div id="app">

    <coma></coma>

    {{ msg }}

  </div>

  <script>

    // 再vue原型上面寫一個事件匯流排屬性，指向vue的例項化物件

    Vue.prototype.$EventBus = new Vue()

    Vue.component('coma', {

      template: `

        <div>

          <button @click="sendMsg">coma傳送</button>

        </div>

      `,

      methods: {

        sendMsg(){

          // 事件匯流排

          this.$EventBus.$emit('send', '我是coma傳送過來的訊息')

        }

      }

    })

    new Vue({

      el: '#app',

      data: {

        msg: '我是父親的msg'

      },

      // 頁面渲染出來了

      mounted(){

        this.$EventBus.$on('send', (msg)=>{ //監聽

          console.log(msg)

          this.msg = msg

        })

      }

    })

  </script>