vue中如何在自定义组件上使用v-model和.sync
自定义事件
tips
- 推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)
- changeData ×
- change-data √
自定义组件的v-model
- 用法:
- 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过
v-model="data"
进行传递 - 默认传递的属性名是
value
,事件名为input
。可以在子组件中配置model
选项重命名属性名和事件名 - 子组件props接受名称为value的属性(固定名),通过
$emit("input", payload)
在子组件即可修改数据,形成双向绑定
- 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过
// 父组件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son v-model="dadData" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
};
},
};
</script>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<input type="text" :value="value" @input="sonInput" />
<button @click="btnClick(Date.now())">点击</button>
</div>
</template>
<script>
export default {
// 如果重命名,记得这里也要修改哦 props: ["novalue]
props: ["value"],
// 这里可以重命名接收到的属性值和事件名
// model: {
// prop: "novalue",
// event: "changeNoval",
// },
methods: {
sonInput(e) {
this.$emit(`input`, e.target.value);
},
btnClick(data) {
this.$emit(`input`, data);
},
},
};
</script>
.sync 修饰符
为什么会有这个修饰符?它解决了什么问题?
- 正常我们父子组件通信是父组件props传参,v-on监听改变数据的事件,子组件通过$emit去触发。
- 父组件每次都要定义类似的事件函数this.data = newData,如果是一个对象,那么它的每个属性传递过去都要定义相应的事件函数(麻烦重复的代码变多了)
- .sync就是用来简化这块的代码
怎么使用.sync?
- 父组件直接在子组件标签上使用
:name.sync="person.name"
- 默认发送的处理的事件名为
update:name
,name就是你传过去的属性名 - 如果需要使用属性,子组件可以通过props接收,也可以使用
$attr,$parent
等获取。注意:props接收过的属性不会出现在当前实例的$attr中 - 如果需要触发事件,可以使用
$emit("update:属性名", payload)
,也可以使用$listener
- 使用
v-bind.sync="obj"
可以把obj对象中的每个属性和事件自动分发给子组件
- 父组件直接在子组件标签上使用
// 父组件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son :something.sync="dadData" v-bind.sync="dadObj" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
dadObj: {
girlFriends: ["dingding", "momo", "weiwei"],
age: 24,
},
};
},
};
</script>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<button @click="btnClick(Date.now())">点击</button>
<span>{{ something }}</span>
<span>{{ girlFriends }}</span>
</div>
</template>
<script>
export default {
props: ["something", "girlFriends"],
methods: {
btnClick(data) {
this.$emit(`update:something`, data);
},
},
mounted() {
this.$listeners["update:girlFriends"](["singleDog"]);
// {age: 24}
console.log(this.$attrs);
},
};
</script>
思考
v-model和.sync本质都是语法糖,设计出来就是为了方便使用减少代码量。不过更利于使用的封装究竟是方便新手的上手还是加重了学习负担,可能各执己见吧
文章只是个人学习文档并记录总结,具体细节请自行查阅官方文档
https://cn.vuejs.org/v2/guide/components-custom-events.html
vue中如何在自定义组件上使用v-model和.sync的更多相关文章
- HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
- Vuejs中slot实现自定义组件header、footer等
Vuejs中slot实现自定义组件header.footer等 vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/ ...
- (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- 【vue】---- v-model在自定义组件中的使用
1. v-model简介 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定,它的本质是一个语法 ...
- Vue中调用另一个组件中自定义事件
之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- Scrollview中嵌套ListView(自定义组件解决)
首先,ScrollView中只能放一个控件,一般都放LinearLayout,orientation属性值为vertical.在LinearLayout中放需要呈现的内容.ListView也在其中,L ...
- Vue之彻底理解自定义组件的v-model
最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是 ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
随机推荐
- vs.net调试ArcGIS Engine代码查看变量时,提示“要检查本机对象,请启用本机代码调试。” 的解决方法
用vs2017 调试 查看ArcGIS Engine 的变量时 会提示如下图所示的错误: 解决方法: 工具->选项->调试->常规->使用托管的兼容模式 如下图所示: 2.设置 ...
- 116_Power Pivot 先进先出原则库龄库存计算相关
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一背景 前面写过了一个关于进销存的案例,留一个话题就是先进先出的库存计算. 刚好有朋友提了相关这样的需求.先来看看效果. ...
- 关于ECharts图表反复修改都无法显示的解决方案
解决方案:清空浏览器所有记录,再次刷新即可
- Aged-cat 的 WebServer 配置详细流程
前言 最近看到一个不错的webserver项目,但是配置过程给的不详细,这里给出详细配置过程 项目地址:https://github.com/Aged-cat/WebServer (感谢老猫大神的项目 ...
- 软件构造Lab2实验总结
本次实验训练抽象数据类型(ADT)的设计.规约.测试,并使用面向对象编程(OOP)技术实现ADT.具体来说内容如下: 针对给定的应用问题,从问题描述中识别所需的ADT: 设计ADT规约(pre-con ...
- singlelinklist
C++实现单链表 阅读先知 链表是一种动态数据结构,他的特点是用一组任意的存储单元(可以是连续的,也可以是不连续的)存放数据元素. 链表中每一个元素成为"结点",每一个结点都是由数 ...
- FastDFS 技术整理
1.FastDFS 1.1.了解基础概念 1.1.1.什么是分布式文件系统? 全称:Distributed File System,即简称的DFS 这个东西可以是一个软件,也可以说是服务器,和tomc ...
- python基础学习6
Python的基础学习6 内容概要 while + else 死循环.while的嵌套 for循环基本使用 range关键字 for循环补充.爬虫 基本数据类型及内置方法 内容详情 while + e ...
- python发QQ邮件
python发qq邮件相对比较简单,网上教程一大把:固定套路,后面封装看自己怎么方便可以怎样进行封装:原版代码如下: """ # -*- coding : utf-8 - ...
- .NET 6.0.6 和 .NET Core 3.1.26、Visual Studio 2022 17.2 和 17.3 Preview 2 和 .NET 7.0 Preview 5 同时发布
Microsoft 昨天发布了适用于 .NET 6.0.6 和 .NET Core 3.1.26.NuGet.Visual Studio 2019 和 Visual Studio 2022 17.2 ...