vue .sync修饰符和v-model区别_vue.sync修饰符使用实例

最新推荐文章于 2023-07-18 12:22:16 发布
最新推荐文章于 2023-07-18 12:22:16 发布
阅读量349 收藏
点赞数
文章标签： vue .sync修饰符和v-model区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31523833/article/details/113323411
版权

0a40262cede9c9050e7756cd4c3d7ba6.png

文章选自我的语雀专栏《不造点轮子你可能都不知道的前端技巧》，

如果你喜欢的话可以关注我的语雀专栏https://www.yuque.com/u548790/technique，或者关注我的官网https://www.chenshiyu.com.cn/

如果你不能忍受知乎糟糕的排版，请点击查看原文：https://www.yuque.com/u548790/technique/tfcley

f33d6cc5b0b632d127d5383bff2a75e1.png

涉及的组件：cascader组件（级联选择器）；使用场景：在使用的时候会给父元素传一个selected，点击下面的列表，会动态的将选中的元素更新到input中。

前情提要


我们先看一下对该组件的最佳引入方式：
需要传入source（对应列表渲染的内容）和selected（选中的内容）。
demo.vue

11a853dbe555b04dc0ea257b2f78f36c.png


代码实现


强调几个我们需要知道的点：

  1. 级联列表使用逻辑：点击列表的元素更新selected；

4c9e546a8eb260358dd6ea986fd7f931.png
  1. 注意selected是我们传给<g-cascader>的，vue是不推荐直接更新prop传过来的元素的，所以我们是不可以直接在点击的时候更新this.selected；
  2. 所以，在点击的时候，我们需要将点击的元素this.$emit('update:selected', item)出去；

5cc0451c6f2f10a386bbef4ba13f0d60.png


这里的emit出去的名字格式必须是updated:xxx（这和我们要用的.sync的约定有关）

  1. 到最外层demo.vue监听update:selected事件

demo.vue文件

d6a027b939e841da1c26bb19738e59cb.png

02324e69b7bfeecdf372fd398b8a600d.png


文章选自我的语雀专栏《不造点轮子你可能都不知道的前端技巧》，

如果你喜欢的话可以关注我的语雀专栏https://www.yuque.com/u548790/technique，或者关注我的官网https://www.chenshiyu.com.cn/

如果你不能忍受知乎糟糕的排版，请点击查看原文：https://www.yuque.com/u548790/technique/tfcley

久作无端客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+elementui 后台管理记录
qq_39121482的博客
09-16 1186
vue3+elementui 后台管理记录1关于'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead报错如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 关于’.sync’ modifier
v-model 和 .sync修饰符的区别
xiaoyugan000的博客
07-04 506
vue框架中 v-model一般用于在表单元素中进行双向数据绑定。v-model指令本质上是一个语法糖。语法糖的大概意思就是 是一种更加方便的写法，在不影响其功能的情况下。增加可读性，减少出错率。更加方便使用。一般我们通过下面的例子使用v-model指令实现双向数据绑定 下面是实际上完整的写法： input元素本身有个input事件，是HTML5新加的。每当输入框内容发生变化，就会触发input事件，把最新的value值（$event.target.value）传给val。这就是双向数据绑定。注意：
详解VUE自定义组件中用.sync修饰符与v-model的区别
08-27
主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue .sync修饰符和v-model区别_浅析Vue中.sync修饰符
weixin_42519253的博客
01-26 364
v-bind 有三种修饰符，分别为 .sync、.once、.camel。.sync : 用于组件props属性，进行双向绑定，即父组件绑定传递给子组件的值，无论在哪个组件中对其进行了修改，其他组件中的这个值也会随之更新。案例背景爸爸给儿子钱，儿子要花钱怎么办？答：儿子打电话（触发事件）向爸爸要钱Vue规则：组件不能修改props外部数据Vue规则：$emit 可以触发事件，并传参Vue规则：$e...
Vue v-model 指令详解以及sync修饰符的使用场景（结合父子组件通信案例）
zep
06-28 196
一、需求如下： 二、代码如下 三、分步解析： 父组件给子组件传值： 子组件给父组件传值：
‘.sync‘ modifier on ‘v-bind‘ directive is deprecated. Use ‘v-modelpropName‘ instead.
qq_43203949的博客
12-09 6225
vue3弃用了`.sync`做属性的双向绑定，改用`v-model:propName`
vue .sync修饰符的使用详解
08-27
例如，在 father.vue 中，我们可以使用 .sync 修饰符来实现父子组件之间的双向绑定：<template> <div class="hello"> <input type="text" v-model="wrd"> <box :word.sync="wrd" ></box> </div></template> ...
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
10-15
总的来说，Vue的`v-model`修饰符提供了强大的灵活性，可以根据项目需求调整数据绑定的行为，从而提升用户体验和性能。了解并熟练运用这些修饰符，能够帮助开发者更好地构建响应式且高效的Vue应用。
V3中V-Model和V2的区别
最新发布
2301_76869008的博客
07-18 826
在 Vue2 中的 v-model 上，我们用过 .trim、.lazy 和 .number这三个内置修饰符，而 Vue3 则在这个基础上增加了自定义修饰符，即开发者可以自定义修饰符，以按需处理绑定值。v-model 是 Vue 中使用频率特别高的一个指令，而 Vue3 中的 v-model 有了很大的变化，本文将详细讲述一下 Vue2 和 Vue3 中的 v-model 的区别。可以看到 .sync 和 v-model 所能达到的效果是一样的，用什么就看你什么场景，一般表单组件上都是用 v-model。
Vue3+vue/cli4.5.x版本升级采坑(3) - Eslint校验报错/Vue语法不兼容
sherleysong的专栏
04-21 1万+
“@vue/component-compiler-utils”: “^3.1.2”, “vue-template-compiler”: “^2.6.12”, “babel-plugin-component”: “^1.1.1”, “less”: “^4.1.1”, “style-resources-loader”: “^1.4.1”, “vue-cli-plugin-style-resources-loader”: “~0.1.5” 报错问题截图 代码层面改造： .native报错 <!
vue中的v-model
qq_36545656的博客
11-05 1256
默认元素v-model： vue 中的v-model 实现了对数据的双向绑定，即 数据->模版，模版-> 数据 的绑定， 例如： <input type="text" v-model="message"> <p>{{message}}</p> v-model 是经过vue封装后的一个指令，目的是方便我们使用，它内部真实的实现方式： <input :value="message" @input="message = $event.target.
vue3相比vue2有哪些变化？
Mr_RedStar的博客
03-17 1544
vue3相比vue2有哪些变化？API和数据响应式的变化去除构造函数组件实例中的API响应式的变化生命周期Vue3新增模板中的变化v-model与.sync修饰符v-for和v-ifkeyFragment组件的变化异步组件可自行更改组件结构 API和数据响应式的变化 去除构造函数 在vue2中，当一个页面需要多个vue应用时，在需要插件的场景下，会导致多个应用都挂载了相同的插件，因为插件的注册是在new vue之前，即挂载在vue的原型上。 Vue.use(XXX) Vue.mixin(XXX) new
vue组件之menu导航菜单
weixin_33714884的博客
03-22 5086
menu导航菜单组件预览地址 组件之间的通信 <x-menu :selected.sync="selected" > <x-sub-menu name="extension"> <template slot="title">扩展</template> ...
h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式
weixin_39614322的博客
08-04 695
说点什么一个管理端的系统，最常用的是数据表格及分页。这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程。可直接跳至文章末尾，看实现效果：传送门。QTable 数据表首先，从文档：QTable中能看到很多种表格样式，找到一款与我们的项目UI效果相似的来使用：示例title="Treats":data="data":columns="columns"ro...
uniapp双向绑定switch开关选择器
甘榆
06-18 2万+
uni中switch的checked属性只会在页面初始加载时有效，后来在手动修改时，并不更新视图。可以借鉴vue中的this.$set思想，将checked属性绑定的值封装成对象。 HTML： <switch class="section-right" :checked="treatmentStatu.checked" @change="switchChange"/> j...
nginx报错 the "ssl" directive is deprecated, use the "listen ... ssl"
热门推荐
08-22 4万+
今天更新了nginx然后重启docker发现报错了：the "ssl" directive is deprecated, use the "listen ... ssl" 下面是详细的日志 Attaching to docker_go-nginx_1 go-nginx_1 | 2019/08/22 03:21:30 [warn] 6#6: the "ssl" directive is de...
Vue进阶（二十五）：＜component＞实现动态组件
IT全栈 华强工作室
12-22 1万+
元素是vue 里面的一个内置组件。 在里面使用 v-bind: is，可以实现动态组件的效果。 例子解析： 下面例子创建一个包含多个子组件的 vue 实例。 vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bcomp，ccomp html 代码部分：使用vue 的内置组件 ，并使用 “is...
Vue：v-on、v-bind、v-model用法
灿灿大王搭建的黄金屋
06-04 5006
1、v-on：用于绑定HTML事件 ： 一般v-on:click 可以缩写为 @click，其中@代表v-on: 示例：例如我们在HTML的body中加入一个绑定了事件的button <div id="app"> <button v-on:click="onClick">点击这里</button> </div> 在js的methods中...
Vue .sync修饰符深度绑定与应用实例详解
在实际应用中，如`father.vue`的例子所示，开发者可以创建一个输入框（`<input v-model="wrd">`），当用户输入时，`.sync`修饰符会确保`wrd`的值实时同步到子组件`box`中。这样，不仅方便了数据流管理，也降低了维护...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值