Vue从TodoList中学父子组件通信
作者:UCCs 发布时间:2024-05-29 22:22:20
简单的 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)
}
通过父子组件之间的通信,就可以实现 父->子 子->父 之间数据传输问题。
来源:https://segmentfault.com/a/1190000018101014
猜你喜欢
- Pandas是一个用于数据分析和操作的Python库。在pandas中几乎所有的操作都围绕着DataFrame。Dataframe是一个二维
- 函数带括号和不带括号的区别1、不带括号时,调用的是这个函数本身 ,是整个函数体,是一个函数对象,不需等该函数执行完成2、带括号(此
- 1.Python是如何进行内存管理的?答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制一、对象的引用计数机制Pytho
- 简介testing是 Go 语言标准库自带的测试库。在 Go 语言中编写测试很简单,只需要遵循 Go 测试的几个约定,与编写正常的 Go 代
- 实战场景本篇博客为大家介绍一款新的自动化测试工具,效果类似 selenium,但是这个模块年轻。模块名称为 playwright-pytho
- 一个不错的js效果,实现了图片预加载,并实时显示图片加载进度。<script> var l=0; var i
- 1.读取CSV文件到Listdef readCSV2List(filePath): try: file=open(filePat
- 解决方法一:使用python的BeautifulSoup来抓取网页然后输出网页标题,但是输出的总是乱码,找了好久找到解决办法,下面分享给大家
- 前言最近在工作中碰到一个小的排序问题,需要按嵌套对象的多个属性来排序,于是发现了Python里的operator模块和sorted函数组合可
- python 与 C++ dlib人脸检测结果对比,供大家参考,具体内容如下说明:由于项目需求发现Linux下c++使用dlib进行人脸检测
- 一、输入注入注入攻击非常广泛而且很常见,注入有很多种类,它们影响所有的语言、框架和环境。SQL 注入是直接编写 SQL 查询(而非使用 OR
- 零、配置Tomcat默认情况下Tomcat是没有配置用户角色权限的但是,后续Jenkins部署项目到Tomcat服务器,需要用到Tomcat
- 事件处理,是 GUI 程序中不可或缺的重要组成部分,相比来说,控件只是组成一台机器的零部件, 而事件处理则是驱动这台机器&ldquo
- 在写论文时,如果是菜鸟级别,可能不会花太多时间去学latex,直接用word去写,但是这有一个问题,当我们用其他工具画完实验彩色图时,放到w
- using System;using System.Collections.Generic;using System.Text;using
- Python提供多种数据类型来存放数据项集合,主要包括序列(列表list和元组tuple),映射(如字典dict),集合(set),下面对这
- 本文实例讲述了php通过获取头信息判断图片类型的方法。分享给大家供大家参考。具体实现方法如下:$filename = '617.gi
- 在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUplo
- 如果直接在命令行中利用input和raw_input读入一个文件来处理,并且想要采用直接将文件拖入命令行来处理的方式,input方法可以直接
- Django 简介Django是一个开放源代码的Web应用框架,由Python写成。采用了MTV的框架模式,即模型M,视图V和模版T。它最初