php task todolist,如何使用Vue内父子组件通讯todolist组件

这次给大家带来如何使用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中文网其它相关文章！

推荐阅读：