<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>