这次给大家带来如何使用Vue内父子 组件 通讯
一、todolist功能开发
提交
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、组件传值
父组件向子组件传值是通过属性的形式。
提交
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的删除功能
子组件通过发布订阅模式通知父组件。
提交
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);
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
怎样用JS做出井字棋游戏
怎样使用vue2.0实现导航守卫
以上就是如何使用Vue内父子组件通讯todolist组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2755345.html
