组件通讯

     <!-- 
          组件通信：
          1. 父子   通过props
          2. 子父   
                    1. 子组件通过触发自定义的事件 this.$emit('自定义事件的名字', 触发这个事件时传递过去的参数)
                    2. 父组件要收到儿子发来的事件的话，需要在调用儿子组件的时候，通过 v-on 去监听那个自定义事件
                    3. 然后父组件就在那个事件处理函数中干需要做的事情
        
                    PS： 触发事件时如果携带了参数，那么在绑定事件时是通过 $event 接受到的。
                       1. 普通事件，$event 就是事件对象
                       2. 自定义事件，$event 就是传递过来的参数
          3. 兄弟
                  找父亲的操作
                  1. 子->父   $emit()  一定要在父组件中监听自定义事件去执行
                  2. 父->子   props
          4. 其余复杂关系
                  中央事件管理器 | 事件总线
         -->
        <div id="add">
            <zhang></zhang>
            
        </div>
        <script src="vue.js"></script>
        <script>
            Vue.component('zhang',{
                data(){
                    return{
                        son1Name:'张老一',
                        son2Name:'张老二'
                    }
                },
                template:`
                 <div>
                  <h1>Hello</h1>
                <!--:name="son1Name"将父组件传来的数据传入到子组件中-->
                  <zhang-son1 :name="son1Name" @abc="fn1($event)" @efg="fn2" @cg="fn3"></zhang-son1>
                  <hr />
                  <zhang-son2 :name="son2Name"></zhang-son2>
                </div>
                `,
                methods:{
                    fn1(event){
                        this.son1Name =event
                    },
                    fn2(event){
                        this.son1Name = event
                    },
                    fn3(event){
                        this.son2Name = event
                    }
                }
            })
            
            Vue.component('zhang-son1',{
                props:{
                    name:String
                },
                template:`<div>
                      <h1>son1</h1>
                      <p>我的名字是：{{ name }}</p>
                    <button @click="fn1">不喜欢父亲给我取得名字，我要修改</button>
                       <button @click="fn2">我去给父亲商量商量</button>
                     <button @click="fn3">修改弟弟的名字</button> 
                    </div>`,
            methods:{
                fn1(){
                    this.son1Name =event
                },
                fn2(){
                    <!-- $emit()是联系父组件的时间,第一个参数是自定义事件名,第二个参数是要携带的数据 -->
                    this.$emit('abc','张三丰')
                },
                fn3(){
                    this.$emit('cg','张二狗')
                }
            }
            })
            //组件构造器
            Vue.component('zhang-son2',{
                props:{
                    name:String 
                },
                //注册组件
                template:`
                <div>
                  <h1>son2</h1>
                  <p>我的名字是：{{ name }}</p>
                </div>
                `
            })
            const app = new  Vue({
                el:"#add"
                
            })
        </script>