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>