第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定

本文主要是介绍第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 原生事件修饰符.native

1.1. 关于组件标签上的事件

在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理

示例代码如下:

<div id="app"><!-- 使用组件 --><!--  组件标签上使用DOM元素原生事件不会触发, --><my-component :clicks="clicks" @click="handleParentClick"></my-component>
</div><!-- 组件模板 -->
<template id="MyComponent"><div>被点击了<button>点击</button></div>
</template><script>//  组件选项对象let MyComponent = {template: `#MyComponent`,}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent},methods:{handleParentClick(){// 11 不会打印console.log(11);}}})</script>

此时子组件上绑定的是自定义的事件不是原生的事件,
因为是自定义事件,我们就可以通过使用触发自定义事件的方式,来触发.
通过$emit 触发这个组件标签上的自定义事件

示例代码如下:

<div id="app"><!-- 使用组件 --><!--  click 事件不会被当做DOM原生事件处理,只会被当做自定义事件处理--><my-component @click="handleParentClick"></my-component>
</div><!-- 组件模板 -->
<template id="MyComponent"><div>被点击了<!-- 1. 子组件通过原生click事件触发子组件自己的函数 --><button @click="handleClick">点击</button></div>
</template><script>//  组件选项对象let MyComponent = {template: `#MyComponent`,methods:{handleClick(){// 触发组件标签上自定义事件clickthis.$emit("click")}}}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent},methods:{handleParentClick(){console.log(11);}}})
</script>

1.2 可以通过修饰符来处理组件标签上的原生事件

如果需要在子组件的dom上绑定原生的事件,而不是一个自定义事件该如何处理
可以通过 vue提供的修饰符.native来告知绑定的是原生的事件

示例代码如下:

<div id="app"><!-- 使用组件 --><!-- 在组件标签上,如果需要使用原生事件,使用修饰符native, 这样vue就会把他当做原生事件处理了--><my-component @click.native="handleParentClick"></my-component>
</div><!-- 组件模板 -->
<template id="MyComponent"><div>被点击了<button>点击</button></div>
</template><script>//  组件选项对象let MyComponent = {template: `#MyComponent`,}//  实例中注册组件const vm = new Vue({el:"#app",components: {"MyComponent": MyComponent},methods:{handleParentClick(){console.log(11); }}})
</script>

2. 双向绑定修饰符.sync

在一些情况下,我们可能会需要对一个 prop 进行“双向绑定”。事实上,这正是 Vue 1.x 中的 .sync 修饰符所提供的功能。
当一个子组件改变了一个带 .sync 的 prop 的值时,这个变化也会同步到父组件中所绑定的值。这很方便,但也会导致问题,因为它破坏了单向数据流。由于子组件改变 props 的代码和普通的状态改动代码毫无区别,光看子组件的代码时,你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。

上面所说的正是我们在 2.0 中移除 .sync 的理由。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分

从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。


2.1 原来我们子组件要修改父组件状态是如下用法

父组件中

<div id="app"><!-- 使用组件 --><my-component :clicks="clicks"@update:clicks = "handleParentClick"></my-component>
</div><script>//  实例中注册组件const vm = new Vue({el:"#app",data:{clicks: 0},components: {"MyComponent": MyComponent},methods:{handleParentClick(value){this.clicks = value}}})
</script>

子组件


<!-- 组件模板 -->
<template id="MyComponent"><div>被点击了{{ clicks }}次<button @click="handleClick">点击</button></div>
</template><script>//  组件选项对象let MyComponent = {props:["clicks"],template: `#MyComponent`,data(){return {num:this.clicks}},methods: {handleClick(){this.num++;this.$emit("update:clicks",this.num)}}}
</script>

2.2 现在使用.sync修饰符后的用法

父组件

<div id="app"><!-- 使用组件 --><my-component :clicks.sync="clicks"></my-component>
</div><script>//  实例中注册组件const vm = new Vue({el:"#app",data:{clicks: 0},components: {"MyComponent": MyComponent}})</script>

子组件


<!-- 组件模板 -->
<template id="MyComponent"><div>被点击了{{ clicks }}次<button @click="handleClick">点击</button></div>
</template><script>//  组件选项对象let MyComponent = {props:["clicks"],template: `#MyComponent`,data(){return {num:this.clicks}},methods: {handleClick(){this.num++;this.$emit("update:clicks",this.num)}}}</script>

2.3 通过示例我们就会发现

其实

  <my-component :clicks.sync="clicks"></my-component>

会被扩展为

<my-component :clicks="clicks"@update:clicks = "handleParentClick"></my-component>

当子组件需要更新 clicks 的值时,它需要显式地触发一个更新事件:

handleClick(){this.num++;this.$emit("update:clicks",this.num)
}



3. 组件的双向数据绑定 v-model

我们之前已经学过了在普通的DOM元素上使用v-modle指令来处理双向数据绑定, 一般会用在表单元素上


3.1 复习基本v-model的用法

<div id="app"><input type="text" v-model="value">{{ value }}
</div><script>const vm = new Vue({el:"#app",data:{value: '' }})
</script>

双向数据绑定就是数据变化,显示视图也随之发生变化, 视图发生变化, vue中的数据也发生变化

理解这个原理后,我们也可以自己通过事件来处理双向数据绑定


3.2 使用事件的表单控件

就是我们将data中的数据绑定到表单的value值上, 这样只会在当数据变化的时候改变视图, 但是视图的改变会不会修改数据

那么我们就可以使用一个事件来处理这件事情, 当用户输入内容后就会触发函数, 在函数内获取表单最新的值修改掉data中数据

<div id="app"><input type="text" :value="value"@input = "changeValue"/>{{ value }}
</div><script>const vm = new Vue({el:"#app",data:{value: '' },methods:{changeValue(){// 在事件里获取表单的内容this.value = event.target.value;}}})</script>

3.3 利用自定义事件处理组件中表单的双向数据绑定

我们利用同样的思路, 将父组件的数据通过单向下行数据流传给子组件

在利用自定义事件,将子组件中的数据传递给父组件, 处理成自定义的双向数据绑定

<div id="app"><!-- 使用组件 --><my-component :value="value"@input = "handleParentClick"></my-component>{{ value }}
</div><!-- 组件模板 -->
<template id="MyComponent"><div><input type="text" :value="value"@input="handleInput"/></div>
</template><script>//  组件选项对象let MyComponent = {props:["value"],template: `#MyComponent`,methods: {handleInput(){this.$emit("input",event.target.value)}}}//  实例中注册组件const vm = new Vue({el:"#app",data:{value: '' },components: {"MyComponent": MyComponent},methods:{handleParentClick(value){this.value = value},}})</script>

3.4 自定义组件的v-model

Vue在2.2.0版本中给允许我们在自定义组件上使用v-model来处理双向数据绑定,

<div id="app"><!-- 使用组件 --><my-component v-model="value"></my-component>{{ value }}
</div><!-- 组件模板 -->
<template id="MyComponent"><div><input type="text" :value="value"@input="handleInput"/></div>
</template><script>//  组件选项对象let MyComponent = {props:{value:{type:String,required: true}},template: `#MyComponent`,methods: {handleInput(){this.$emit("input",event.target.value)}}}//  实例中注册组件const vm = new Vue({el:"#app",data:{value: '' },components: {"MyComponent": MyComponent}})</script>

我们会发现在组件中使用v-model指令,等价于

<my-component :value="value"@input = "handleParentClick"></my-component>

这篇关于第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1049845

相关文章

使用Redis快速实现共享Session登录的详细步骤

《使用Redis快速实现共享Session登录的详细步骤》在Web开发中,Session通常用于存储用户的会话信息,允许用户在多个页面之间保持登录状态,Redis是一个开源的高性能键值数据库,广泛用于... 目录前言实现原理:步骤:使用Redis实现共享Session登录1. 引入Redis依赖2. 配置R

使用Python的requests库调用API接口的详细步骤

《使用Python的requests库调用API接口的详细步骤》使用Python的requests库调用API接口是开发中最常用的方式之一,它简化了HTTP请求的处理流程,以下是详细步骤和实战示例,涵... 目录一、准备工作:安装 requests 库二、基本调用流程(以 RESTful API 为例)1.

使用Python开发一个Ditto剪贴板数据导出工具

《使用Python开发一个Ditto剪贴板数据导出工具》在日常工作中,我们经常需要处理大量的剪贴板数据,下面将介绍如何使用Python的wxPython库开发一个图形化工具,实现从Ditto数据库中读... 目录前言运行结果项目需求分析技术选型核心功能实现1. Ditto数据库结构分析2. 数据库自动定位3

Python yield与yield from的简单使用方式

《Pythonyield与yieldfrom的简单使用方式》生成器通过yield定义,可在处理I/O时暂停执行并返回部分结果,待其他任务完成后继续,yieldfrom用于将一个生成器的值传递给另一... 目录python yield与yield from的使用代码结构总结Python yield与yield

Go语言使用select监听多个channel的示例详解

《Go语言使用select监听多个channel的示例详解》本文将聚焦Go并发中的一个强力工具,select,这篇文章将通过实际案例学习如何优雅地监听多个Channel,实现多任务处理、超时控制和非阻... 目录一、前言:为什么要使用select二、实战目标三、案例代码:监听两个任务结果和超时四、运行示例五

python使用Akshare与Streamlit实现股票估值分析教程(图文代码)

《python使用Akshare与Streamlit实现股票估值分析教程(图文代码)》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl

pandas数据的合并concat()和merge()方式

《pandas数据的合并concat()和merge()方式》Pandas中concat沿轴合并数据框(行或列),merge基于键连接(内/外/左/右),concat用于纵向或横向拼接,merge用于... 目录concat() 轴向连接合并(1) join='outer',axis=0(2)join='o

批量导入txt数据到的redis过程

《批量导入txt数据到的redis过程》用户通过将Redis命令逐行写入txt文件,利用管道模式运行客户端,成功执行批量删除以Product*匹配的Key操作,提高了数据清理效率... 目录批量导入txt数据到Redisjs把redis命令按一条 一行写到txt中管道命令运行redis客户端成功了批量删除k

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我