组件要想成为只能在父组件中使用的一个专属子组件,必须降级
-降级步骤
-1.子组件 var 组件名 使用驼峰命名法 比如 todoAdd****todoList
*
var todoadd={template:`
div...`}*,
data(){tetrun{}}
//data是个函数 需要数据间不相互干扰
2.父组件 可以直接使用 vue会自动把todoAdd转变成这样的形式,后面写上components:{组件名称},比如components:{ todoAdd}
关于父子间值传递
子组件
子组件需要写入属性props:,props代表的意思是从父组件中获取数据,是个数组
起名尽量与父组件名称保持一致
var todoAdd={
template:`
<ul>
<li v-for="(task,i) of wan" :key="i">{{i+1}}-{{task}} <button>x</button></li>
</ul>
`,
props:["wan"],
data(){
return {
}
},
}
父组件
Vue.component(“todo”,{
template:`
<div>
<h1>代办事件列表</h1>
<todo-list> </todo-list>
<todo-add :wan="tasks"> </todo-add>
</div>
`,data() {
return {
tasks:["吃饭","睡觉","打亮亮"]
}
},
components:{todoAdd,todoList}
})
父组件中 :代表我子组件需要这个,后面的wan尽量与tasks保持一致