文章目录
双向数据传递v-modemodel.sync
双向数据传递
这里提到的父子组件双向数据传递，即父子组件可以进行互相修改我们知道一般父向子传值，子通过props进行接收，子向父传值，是通过$emit发布一个事件，父通过事件的监听获取到子的值，详细可见vue-组件之间的通信这里我们通过v-model，model及sync来实现父子双向的数据传递
v-mode
在vue中的一些表单中，我们经常通过v-mode来实现数据的双向绑定，但其实v-model的本质是一个语法糖，如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">即对input绑定了value的属性，并监听了input事件我们通过v-model这种语法糖的形式，实现自定义的一个VModel组件，从而实现父子的双向数据传递，代码如下：
<template
>
<div
>
<div
>
V-MODEL-INPUT:<VModel v
-model
="VModelVal"></VModel
>
V-MODEL-INPUT-PARENT: <input type
="text" v
-model
="VModelVal">
</div
>
</div
>
</template
>
<script
>
import VModel
from './VModel';
export default {
data() {
return {
VModelVal
:'VModelVal'
};
},
components
:{
VModel
}
}
</script
>
<template
>
<div
class="v-model-wrapper">
<input type
="text" :value
="value" @input
="handleInput">
</div
>
</template
>
<script
>
export default {
data(){
return {}
},
props
:{
value
: String
,
default:''
},
methods
:{
handleInput(e
){
this.$emit('input', e
.target
.value
);
}
}
}
</script
>
model
默认情况下，一个组件的v-model会把value用作prop， 且把input用过event当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。如下：我们通过修改prop及event来实现一个自定义的v-model，从而实现父子组件的双向数据传递
<template
>
<div
>
<div
>
MODEL-INPUT:<Model v
-model
="ModelVal"></Model
>
MODEL-INPUT-PARENT: <input type
="text" v
-model
="ModelVal">
</div
>
</div
>
</template
>
<script
>
import Model
from './Model';
export default {
data() {
return {
ModelVal
:'ModelVal'
};
},
components
:{
Model
}
}
</script
>
<template
>
<div
>
<input type
="text" :value
="val" @keyup
="handleInput">
</div
>
</template
>
<script
>
export default {
model
:{
prop
:'val',
event
: 'keyup'
},
data(){
return {}
},
props
:{
val
: {
type
: String
,
default: ''
}
},
methods
:{
handleInput(e
){
this.$emit('keyup', e
.target
.value
);
}
}
}
</script
>
.sync
当子组件变更父组件数据时，推荐以update:myPropName的模式触发事件举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图
this.$emit('update:title', newTitle
)
然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：
<text
-document
v
-bind
:title
="doc.title"
v
-on
:update
:title
="doc.title = $event"
></text
-document
>
为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符， 用法如下：
<template
>
<div
>
<div
>
SYNC-INPUT:<SYNC :syncVal
.sync
='SyncVal'></SYNC>
SYNC-INPUT-PARENT: <input type
="text" v
-model
="SyncVal">
</div
>
</div
>
</template
>
<script
>
import SYNC from './Model';
export default {
data() {
return {
SyncVal
:'SyncVal'
};
},
components
:{
SYNC
}
}
</script
>
<template
>
<div
>
<input type
="text" :value
="syncVal" @keyup
="handleInput">
</div
>
</template
>
<script
>
export default {
data(){
return {}
},
props
:{
syncVal
: {
type
: String
,
default: ''
}
},
methods
:{
handleInput(e
){
this.$emit('update:syncVal', e
.target
.value
);
}
}
}
</script
>
文章参考： Vue.js vue的model选项 Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
