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:'"emitMyname">点击就告诉父亲我叫{{myName}}          
              </button>`,
          //在子组件的methods中使用this.$emit()来传递值;
          //$emit()有2个参数;参数1:需要交换的事件名,参数2:要传递的数据;例 
            如:this.name
          methods:{
            emitMyname(){
              this.$emit('tellFatherMyname',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

<div id="app">
    <!-- 在此处渲染到页面上 -->
    <father></father>
  </div>
  <script>
    //先创建一个vue空实例,作为事件总线
    var eventbus = new Vue();
    Vue.component('father',{
      //组件显示的模板
      template:`<div>
            <son></son>
            <daughter></daughter>
          </div>`,
      components: {
        son:{
          data(){
           return {
            mySisterName:'"emitMyName">点击就告诉哥哥我叫{{myName}}</button>',
          methods:{
            //只要点击按钮,就将事件和数据一起传递过去
            emitMyName(){
              eventbus.$emit('tellBroMyName',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>