Vue中父子组件通讯——组件todolist
2018-05-19 23:10
766 查看
一、todolist功能开发
<!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>View Code
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>
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/9061832.html 有问题欢迎与我讨论,共同进步。
相关文章推荐
- Vue中父子组件通讯之todolist组件功能开发
- vue 父子组件通讯
- Vue中的父子组件通讯以及使用sync同步父子组件数据
- vue父子组件通讯--在组件内使用v-for
- Vue.js 父子组件通讯
- vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)
- vue 通过下拉框组件了解Vue中父子组件通讯
- 深入理解Vue父子组件通讯的属性和事件
- Vue.js 父子组件通讯开发实例
- VueJs组件之父子通讯的方式
- vue 通过下拉框组件学习vue中的父子通讯
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
- Vue.js 父子组件通讯开发实例
- Vue 使用Props属性实现父子组件的动态传值
- vue2.0父子组件间通信
- react.js 父子组件数据绑定实时通讯的示例代码
- vue2.0父子组件以及非父子组件通信
- VUE 简单父子组件,兄弟组件弹窗通信练习
- vue 父子组件之间的数据传递
- vue-cli中父子组件间的变量传递