一、todolist功能开发
<div id=\"root\">
<div>
<input type=\"text\" v-model=\"inputValue\">
<button @click=\"handleSubmit\">提交</button>
</div>
<ul>
<li v-for=\"(item, index ) of list\" :key=\"index\">{{item}} </li>
</ul>
</div>
<script>
new Vue({
el:\"#root\",
data:{
inputValue:\'\',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue=\'\';
}
}
})
</script>
二、todolist组件拆分
定义组件，组件和组件之间通讯
1、全局组件
<div id=\"root\">
<div>
<input type=\"text\" v-model=\"inputValue\">
<button @click=\"handleSubmit\">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component(\'todo-item\',{
template:\'<li>item</li>\'
})
...
2、局部组件
要注册，否则会报错：
vue.js:597 [Vue warn]: Unknown custom element: <todo-item> – did you register the component correctly? For recursive components, make sure to provide the \”name\” option.
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
<title>Document</title>
<script src=\"./vue.js\"></script>
</head>
<body>
<div id=\"root\">
<div>
<input type=\"text\" v-model=\"inputValue\">
<button @click=\"handleSubmit\">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
//全局组件
// Vue.component(\'todo-item\',{
// template:\'<li>item</li>\'
// })
var TodoItem={
template:\'<li>item</li>\'
}
new Vue({
el:\"#root\",
components:{
\'todo-item\':TodoItem
},
data:{
inputValue:\'\',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue=\'\';
}
}
})
</script>
</body>
</html>
3、组件传值
父组件向子组件传值是通过属性的形式。
<div id=\"root\">
<div>
<input type=\"text\" v-model=\"inputValue\">
<button @click=\"handleSubmit\">提交</button>
</div>
<ul>
<todo-item
v-for=\"(item ,index) of list\"
:key=\"index\"
:content=\"item\"
></todo-item>
</ul>
</div>
<script>
Vue.component(\'todo-item\',{
props: [\'content\'], //接收从外部传递进来的content属性
template:\'<li>{{content}}</li>\'
})
new Vue({
el:\"#root\",
data:{
inputValue:\'\',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue=\'\';
}
}
})
</script>
三、组件与实例的关系
new Vue()实例
Vue.component是组件
每一个Vue组件又是一个Vue的实例。
任何一个vue项目都是由千千万万个vue实例组成的。
每个vue实例就是一个组件，每个组件也是vue的实例。
四、实现todolist的删除功能
子组件通过发布订阅模式通知父组件。
<div id=\"root\">
<div>
<input type=\"text\" v-model=\"inputValue\">
<button @click=\"handleSubmit\">提交</button>
</div>
<ul>
<todo-item
v-for=\"(item ,index) of list\"
:key=\"index\"
:content=\"item\"
:index=\"index\"
@delete=\'handleDelete\'
></todo-item>
</ul>
</div>
<script>
Vue.component(\'todo-item\',{
props: [\'content\',\'index\'], //接收从外部传递进来的content属性
template:\'<li @click=\"handleDeleteItem\">{{content}}</li>\',
methods:{
handleDeleteItem:function(){
this.$emit(\'delete\',this.index);
}
}
})
new Vue({
el:\"#root\",
data:{
inputValue:\'\',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue=\'\';
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
})
</script>
以上所述是小编给大家介绍的Vue中父子组件通讯之todolist组件功能开发，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容