Vue.component('father',{
    template:'<div>....<son :myName="mySonName"></son></div>',
    data(){
      return{
        mySonName:'小明'
      }
    },
    //子組件
    components:{
      son:{
        props:['myName'],
        template:'...{{myName}}'
      }
    }
  })

<div id="app">
    <father></father>
  </div>
  <script>
    Vue.component('father',{
      template:`<div>
      <p>我的兒子告訴我他叫{{mySonName}}</p>
      <son @tellFatherMyname="getMySonName"></son>
      </div>`,
      data(){
        return {
          mySonName:'???'
        }
      },
      methods:{
        getMySonName(data){
          console.log(data);
          this.mySonName = data;
        }
      },
      components: {
        son:{
          data(){
            return {
            myName :'小明'
            }
          },
          template:`
              <button @click = "emitMyname">點(diǎn)擊就告訴父親我叫{{myName}}          
              </button>`,
          //在子組件的methods中使用this.$emit()來(lái)傳遞值;
          //$emit()有2個(gè)參數(shù);參數(shù)1:需要交換的事件名,參數(shù)2:要傳遞的數(shù)據(jù);例 
            如:this.name
          methods:{
            emitMyname(){
              this.$emit('tellFatherMyname',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

<div id="app">
    <!-- 在此處渲染到頁(yè)面上 -->
    <father></father>
  </div>
  <script>
    //先創(chuàng)建一個(gè)vue空實(shí)例,作為事件總線
    var eventbus = new Vue();
    Vue.component('father',{
      //組件顯示的模板
      template:`<div>
            <son></son>
            <daughter></daughter>
          </div>`,
      components: {
        son:{
          data(){
           return {
            mySisterName:'???'
           }
          },
          //組件顯示的模板
          template:'<p>我的妹妹告訴我她叫{{mySisterName}}</p>',
          //采用鉤子函數(shù)
          //在鉤子函數(shù)中通過(guò)eventbus.$on('同一個(gè)事件名稱(chēng)',data)來(lái)接收傳遞過(guò)來(lái)的數(shù)據(jù)
          mounted(){
            eventbus.$on('tellBroMyName',data=>{
              this.mySisterName = data;
            })
          }
        },
        daughter:{
          data(){
           return {
            myName:'蘭蘭'
           }
          },
          template:'<button @click="emitMyName">點(diǎn)擊就告訴哥哥我叫{{myName}}</button>',
          methods:{
            //只要點(diǎn)擊按鈕,就將事件和數(shù)據(jù)一起傳遞過(guò)去
            emitMyName(){
              eventbus.$emit('tellBroMyName',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>