Vue非父子级通信

   <div id="app">
     <xz-todo></xz-todo>
   </div>
   <!--1. 为每个组件定义HTML 模板,有几个组件，就要创建几个template-->
   <template id="tplTodo">
     <div>
       <h3>父组件xz-todo: 代办事项列表</h3>
       <xz-todo-input></xz-todo-input>
       <!--父要给子tasks(右),绑定在子的tasks属性(左)中-->
       <xz-todo-list :tasks="tasks"></xz-todo-list>
     </div>
   </template>
   <template id="tplTodoInput">
     <div>
       <h6>子组件xz-todo-input</h6>
       <input v-model="input" @keyup.13="addFun"><button @click="addFun">添加</button>
     </div>
   </template>
   <template id="tplTodoList">
     <div>
       <h6>子组件xz-todo-list</h6>
       <ul>
         <xz-todo-item v-for="(t,i) in tasks" :t="t" :i="i" @remove="removeHandler">
 <!--当子组件触发remove时,就自动执行handler-->
         </xz-todo-item>
       </ul>
     </div>
   </template>
   <template id="tplTodoItem">
     <li>
       <p>孙子组件xz-todo-item</p>
       <span>{{t}}</span><button @click="removeFun">x</button>
     </li>
   </template>
   <script>
     var bus=new Vue();//先建公交车
     //2. 除全局父组件外，为每个子组件创建对象
     var xzTodoInput={
       template:"#tplTodoInput",
       data:function(){
         return { input:"" }
       },
       methods:{
         addFun(){
           if(this.input.trim()!==""){
             bus.$emit("add",this.input)
             this.input="";
           }
         }
       }
     };
     var xzTodoItem={//强调: 子组件对象必须先于父组件定义
       template:"#tplTodoItem",
       //因为子想要任务名(显示)和下标(删除)
       props:["t","i"],
       methods:{
         removeFun(){
           if(confirm("是否删除?"))
             this.$emit("remove",this.i);
         }
       }
     };
     var xzTodoList={
       template:"#tplTodoList",
       props:["tasks"],//因为子想要tasks列表
       components:{
         //可用components继续包含更子级组件
         xzTodoItem
       },
       methods:{
         //当remove发生时，自动调用handler，获得子组件传来的i
         removeHandler(i){
           this.tasks.splice(i,1);
         }
       },
       mounted(){
         //this->Vue
         bus.$on("add",input=>{//必须用=>
           this.tasks.push(input)
         })
       }
     };
     //3. 定义全局父组件，components中仅包含直接子组件
     Vue.component("xz-todo",{
       template:"#tplTodo",
       data:function(){
         return {//1. 因为整个组件需要一个任务列表，所以:
           tasks:[]
         }
       },
       components:{//子组件
         xzTodoInput,//xz-todo-input
         xzTodoList  //xz-todo-list
       },
       mounted(){//2. 在全局父组件中，加载并保存列表数据
         this.tasks=["吃饭","睡觉","打豆豆"];
       }
     })
     //4. new Vue()
     new Vue({
       el:"#app",
       data:{}
     })
   </script>