这次给大家带来如何使用Vue内父子组件通讯todolist组件,使用Vue内父子组件通讯todolist组件的注意事项有哪些,下面就是实战案例,一起来看一下。
一、todolist功能开发
提交
- {{item}}
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
二、todolist组件拆分
定义组件,组件和组件之间通讯
1、全局组件
提交
Vue.component('todo-item',{
template:'
item'})
...
2、局部组件
要注册,否则会报错:vue.js:597 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Document提交
//全局组件
// Vue.component('todo-item',{
// template:'
item'// })
var TodoItem={
template:'
item'}
new Vue({
el:"#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
3、组件传值
父组件向子组件传值是通过属性的形式。
提交
v-for="(item ,index) of list"
:key="index"
:content="item"
>
Vue.component('todo-item',{
props: ['content'], //接收从外部传递进来的content属性
template:'
{{content}}'})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
三、组件与实例的关系
new Vue()实例
Vue.component是组件
每一个Vue组件又是一个Vue的实例。
任何一个vue项目都是由千千万万个vue实例组成的。
每个vue实例就是一个组件,每个组件也是vue的实例。
四、实现todolist的删除功能
子组件通过发布订阅模式通知父组件。
提交
v-for="(item ,index) of list"
:key="index"
:content="item"
:index="index"
@delete='handleDelete'
>
Vue.component('todo-item',{
props: ['content','index'], //接收从外部传递进来的content属性
template:'
{{content}}',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);
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读: