这篇文章主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
sync
在vue2.4以前,父组件向子组件传值用props;子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值。比较繁琐,写法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
//父组件 <template> <div class= "parent" > <p>父组件传入子组件的值:{{name}}</p> <fieldset> <legend>子组件</legend> <child :val= "name" @update= "modify" > </child> </fieldset> </div> </template> <script> import Child from './Child' export default { components:{Child}, data () { return { name: 'linda' } }, methods:{ modify(newVal){ this .name=newVal } } } </script> //子组件 <template> <label class= "child" > 输入框: <input :value=val @input= "$emit('update',$event.target.value)" /> </label> </template> <script> export default { props:[ 'val' ] } </script> |
vue2.4以后的写法明显舒服许多,上面同样的功能,直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
//父组件 <template> <div class= "parent" > <p>父组件传入子组件的值:{{name}}</p> <fieldset> <legend>子组件</legend> <child :val.sync= "name" > </child> </fieldset> </div> </template> <script> import Child from './Child' export default { components:{Child}, data () { return { name: 'linda' } } } </script> //子组件 <template> <label class= "child" > 输入框: <input :value=val @input= "$emit('update:val',$event.target.value)" /> </label> </template> <script> export default { props:[ 'val' ] } </script> |
写法上简化了一部分,很明显父组件不用再定义方法检测值变化了。其实只是对以前的$emit方式的一种缩写,.sync其实就是在父组件定义了一update:val方法,来监听子组件修改值的事件。
$attrs
想象一下,你打算封装一个自定义input组件——MyInput,需要从父组件传入type,placeholder,title等多个html元素的原生属性。此时你的MyInput组件props如下:
1 |
props:[ 'type' , 'placeholder' , 'title' ,...] |
很丑陋不是吗?$attrs专门为了解决这种问题而诞生,这个属性允许你在使用自定义组件时更像是使用原生html元素。比如:
1 2 |
//父组件 <my-input placeholder= "请输入你的姓名" type= "text" title= "姓名" v-model= "name" /> |
my-input的使用方式就像原生的input一样。而MyInput并没有设置props,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div> <label>输入框:</label><input v-bind= "$attrsAll" @input= "$emit('input',$event.target.value)" /> </div> </template> <script> export default { inheritAttrs: false , computed: { $attrsAll() { return { value: this .$vnode.data.model.value, ... this .$attrs } } } } </script> |
基础扫盲
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属性。所以子组件还有下面写法,我倾向于这种写法,因为它更优雅
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <label>输入框:</label><input v-bind= "$attrs" :value= "value" @input= "$emit('input',$event.target.value)" /> </div> </template> <script> export default { inheritAttrs: false , props:[ 'value' ] } </script> |
$listener
同上面$attrs属性一样,这个属性也是为了在自定义组件中使用原生事件而产生的。比如要让前面的MyInput组件实现focus事件,直接这么写是没用的
1 |
<my-input @focus= "focus" placeholder= "请输入你的姓名" type= "text" title= "姓名" v-model= "name" /> |
必须要让focus事件作用于MyInput组件的input元素上,最终的MyInput源码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template> <div> <label>输入框:</label><input v-bind= "$attrsAll" v-on= "$listenserAll" /> </div> </template> <script> export default { inheritAttrs: false , props:[ 'value' ], computed:{ $attrsAll() { return { value: this .value, ... this .$attrs } }, $listenserAll(){ return Object.assign( {}, this .$listeners, {input:(event) => this .$emit( 'input' ,event.target.value)}) } } } </script> |