Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

2023-07-29 15:49:04 72

sync

在vue2.4以前，父组件向子组件传值用props；子组件不能直接更改父组件传入的值，需要通过$emit触发自定义事件，通知父组件改变后的值。比较繁琐，写法如下：

//父组件




//子组件

vue2.4以后的写法明显舒服许多，上面同样的功能，直接上代码

//父组件




//子组件

写法上简化了一部分，很明显父组件不用再定义方法检测值变化了。其实只是对以前的$emit方式的一种缩写，.sync其实就是在父组件定义了一update:val方法，来监听子组件修改值的事件。

$attrs

想象一下，你打算封装一个自定义input组件——MyInput，需要从父组件传入type，placeholder，title等多个html元素的原生属性。此时你的MyInput组件props如下：

props:['type','placeholder','title',...]

很丑陋不是吗？$attrs专门为了解决这种问题而诞生，这个属性允许你在使用自定义组件时更像是使用原生html元素。比如：

//父组件

my-input的使用方式就像原生的input一样。而MyInput并没有设置props，如下

基础扫盲

v-model是v-bind:value和v-on:input的简写，所以在父组件你完全可以直接写:value="name",@input="val=>name=val"。查看文档

疑难

引用下vue的官方api中对$attrs的说明

$attrs包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)

比较迷惑的一点是给子组件设置:value="name"相当于给子组件设置props:['value']，所以在MyInput中直接从$attrs获取不到value，需要重新包装$attrsAll，添加value属性。所以子组件还有下面写法，我倾向于这种写法，因为它更优雅

$listener

同上面$attrs属性一样，这个属性也是为了在自定义组件中使用原生事件而产生的。比如要让前面的MyInput组件实现focus事件，直接这么写是没用的

必须要让focus事件作用于MyInput组件的input元素上，最终的MyInput源码如下：

到此这篇关于Vue2.4+新增属性.sync、$attrs、$listeners的具体使用的文章就介绍到这了,更多相关Vue2.4.sync、$attrs、$listeners内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

热门推荐

随机推荐