.sync
在vue2.4以前,父组件向子组件传值用props;子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值。比较繁琐,写法如下:
//父组件
<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以后的写法明显舒服许多,上面同样的功能,直接上代码
//父组件
<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如下
props:['type','placeholder','title',...]
很丑陋不是吗?$attrs专门为了解决这种问题而诞生,这个属性允许你在使用自定义组件时更像是使用原生html元素。比如:
//父组件
<my-input placeholder="请输入你的姓名" type="text" title="姓名" v-model="name"/>
my-input的使用方式就像原生的input一样。而MyInput并没有设置props,如下
<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的说明
a
t
t
r
s
包
含
了
父
作
用
域
中
不
作
为
p
r
o
p
被
识
别
(
且
获
取
)
的
特
性
绑
定
(
c
l
a
s
s
和
s
t
y
l
e
除
外
)
比
较
迷
惑
的
一
点
是
给
子
组
件
设
置
:
v
a
l
u
e
=
"
n
a
m
e
"
相
当
于
给
子
组
件
设
置
p
r
o
p
s
:
[
′
v
a
l
u
e
′
]
,
所
以
在
M
y
I
n
p
u
t
中
直
接
从
attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外) 比较迷惑的一点是给子组件设置:value="name"相当于给子组件设置props:['value'],所以在MyInput中直接从
attrs包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)比较迷惑的一点是给子组件设置:value="name"相当于给子组件设置props:[′value′],所以在MyInput中直接从attrs获取不到value,需要重新包装$attrsAll,添加value属性。所以子组件还有下面写法,我倾向于这种写法,因为它更优雅
<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事件,直接这么写是没用的
<my-input @focus="focus" placeholder="请输入你的姓名" type="text" title="姓名" v-model="name"/>
必须要让focus事件作用于MyInput组件的input元素上,最终的MyInput源码如下:
<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>