Vue从TodoList中学父子组件通信
更新时间：2019-02-06 22:00:22 作者：佚名 
我要评论(0)
实现一个简单的 todolist，当我输入内容后，点击提交自动添加在下面，如下图所示：
用代码实现这个效果：
<div id="app">
<input ty
简单的 TodoList
实现一个简单的 todolist，当我输入内容后，点击提交自动添加在下面，如下图所示：
用代码实现这个效果：
<div id="app">
<input type="text" v-model="inputVal">
<button v-on:click="clickBtn">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
list:[],
inputVal:''
},
methods:{
clickBtn(){
this.list.push(this.inputVal)
inputVal = ''
}
}
})
</script>
当我在input框中输入内容后，点击提交，Vue 会自动将内容渲染在页面中，具体是怎么实现的呢？
我们都知道 Vue 是一个 MVVM 框架，让开发者专注于数据变更，无需关注 Dom，所以它的核心是VM层，也就是说渲染这部分不需要开发者考虑了。
循环v-for
v-for指令是 Vue 提供的api，可以实现循环添加
v-for="item in list"
将list中数据循环添加到页面中，值为item
所以当我点击提交时，只需要获取到输入框中的值，然后push到list中，我们看到的效果就是一个个添加。
绑定v-model
如何获取输入框中的值变成了一个问题，没用 Vue 之前，获取输入框中的值，非常简单，用$(input).val()就能轻松获取。
用了 Vue 之后，不应该操作 Dom 来获取值，Vue 肯定也考虑到这点了，提供了一个api
v-model="inputVal"
第一次用这个指令时，踩了一个坑，我在inputVal两边加上了双括号，从而导致页面中没任何反应，这边是不需要加双括号的。渲染模版时才需要用 Vue 提供的模版字符串
一个简单的 TodoList 就已经实现了。
组件化
每个li其实都是一个组件，我们可以用组件的形式来开发
全局组件：
<div id="app">
<input type="text" v-model="inputVal">
<button v-on:click="clickBtn">提交</button>
<ul>
<todo-list v-for="item in list"
v-bind:content="index"
></todo-list>
</ul>
</div>
<script>
Vue.component('TodoLsit',{
props:['content'],
template:`<li>{{content}}</li>`,
})
let vm = new Vue({
el: '#app',
data: {
list: [],
inputVal: ''
},
methods: {
clickBtn() {
this.list.push(this.inputVal)
this.inputVal = ''
}
}
})
</script>
用 Vue 提供的component创建组件可创建一个全局组件，组件的名字TodoList在模版中需要用todo-list来实现，大小变小写，中间用-连接。
局部组件：
<button v-on:click="clickBtn">提交</button>
<ul>
<todo-list v-for="item in list"
v-bind:content="item"
></todo-list>
</ul>
</div>
<script>
let TodoList = {
props:['content'],
template: `<li>{{content}}</li>`,
}
let vm = new Vue({
el: '#app',
data: {
list: [],
inputVal: ''
},
component:{ //注册组件
TodoList
},
methods: {
clickBtn() {
this.list.push(this.inputVal)
this.inputVal = ''
}
}
})
</script>
使用局部组件，声明一个对象，内容和全局组件一样，不过需要再 Vue 中注册一下，使用component属性注册
component:{
TodoList
}
用了组件后之后，就会涉及到数据通信，一般有两种：
- 组件中如何才能拿到外面的数据
- 组件中数据变化，外面如何知道
父 -> 子组件通信
现在已经用组件实现上面的功能了，但是组件中还没有数据，如果将我输入框中的数据传递给子组件。
子组件中获取数据，还是用v-for循环，用v-bind绑定需要的数据，组件中用props获取绑定的数据
<todo-list v-for="(item,index) in list"
v-bind:content="item"
v-bind:index="index"
v-on:delete="handleItemDelete"
></todo-list>
let TodoList = {
props:['content'],
template: `<li>{{content}}</li>`, // content 就是相关数据
}
父 -> 子组件通信实现了往组件里面添加数据，如果子组件中要删除一项，应该怎么操作呢？
子 -> 父组件通信
子 -> 父组件通信，Vue 提供了一个$emit()方法，组件中使用v-on指令可绑定事件
<div id="app">
<input type="text" v-model="inputVal">
<button v-on:click="clickBtn">提交</button>
<ul>
<todo-list v-for="(item,index) in list"
v-bind:item="item"
v-bind:index="index"
v-on:delete="handleItemDelete"
></todo-list>
</ul>
</div>
<script>
Vue.component('TodoList',{
props:['item', 'index'],
template: `<li v-on:click="handleItemClick">{{item}}</li>`,
methods: {
handleItemClick() {
this.$emit('delete', this.index)
}
}
})
let vm = new Vue({
el: '#app',
data: {
list: [],
inputVal: ''
},
methods: {
clickBtn() {
this.list.push(this.inputVal)
this.inputVal = ''
},
handleItemDelete(index) {
this.list.splice(index, 1)
}
}
})
</script>
组件中绑定事件，第一个参数是事件名，第二个参数是要传递给父元素的参数
template: '<li v-on:click="handleItemClick">{{item}}</li>'' //绑定事件为 click，需要执行的函数是 handleItemClick
methods: { //写在组件里面
handleItemClick() {
this.$emit('delete', this.index)
}
}
父元素监听事件
<todo-list v-for="(item,index) in list"
v-bind:item="item"
v-bind:index="index"
v-on:delete="handleItemDelete" //监听 delete 事件， 执行函数是 handleItemDelete
></todo-list>
handleItemDelete(index) { //写在 Vue 实例中
this.list.splice(index, 1)
}
通过父子组件之间的通信，就可以实现 父->子 子->父 之间数据传输问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue中父子组件通讯之todolist组件功能开发
相关文章
简单的 TodoList 实现一个简单的 todolist，当我输入内容后，点击提交自动添加在下面，如下图所示： 用代码实现这个效果： <div id="app"> <input ty2019-02-06- 在照着Tensorflow官网的demo敲了一遍分类器项目的代码后，运行倒是成功了，结果也不错。但是最终还是要训练自己的数据，所以尝试准备加载自定义的数据，然而d2019-02-06
- ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用，并通过解构简化对象的数据提取过程。 一、字面量语法扩展 在 ES6 模式下使用字2019-02-06
- 前言 最近由于流量增大，redis 出现了一连串错误，比如： LOADING Redis is loading the dataset in memory use of closed network connection connec2019-02-06
- 使用TensorFlow构建一个神经网络来实现二分类，主要包括输入数据格式、隐藏层数的定义、损失函数的选择、优化函数的选择、输出层。下面通过numpy来随机生成一2019-02-06
- 字符串的大小写转换功能在日常中经常使用。那么如何实现一个简单的大小写转换功能呢? 在php中，最终使用的是c语言的toupper,tolower函数将字符进行大小写2019-02-06
- 前言 开发网关项目时，在请求时往请求头header中放入了签名sign_key信息，在接收请求时再从header中拿出，在本地调试时是可以的，但上线之后通过Nginx代理之后2019-02-06
- __import__函数 我们都知道import是导入模块的，但是其实import实际上是使用builtin函数import来工作的。在一些程序中，我们可以动态去调用函数，如果我们2019-02-06
- 前言 C++类中有几个特殊的非静态成员函数，当用户未定义这些函数时，编译器将给出默认实现。C++11前有四个特殊函数，C++11引入移动语义特性，增加了两个参数为2019-02-06
- 前言 C++博大精深，而且不断拥抱新的变化。本文简要总结一下C++中函数的修饰符，其中部分在实际中极少用到。 按修饰符的位置分为函数名前与函数名后两种，以下2019-02-06
最新评论