一、概念
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。
这也是为什么我们推荐以 update:myPropName
的模式触发事件取而代之。举个例子,在一个包含 title
prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
this.$emit('update:title', newTitle) //仅仅是触发事件,子组件的title值未变
然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
此时,由于doc.title的值更新了,所以子组件的title也会更新。
为了方便起见,我们为这种模式提供一个缩写,即 .sync
修饰符:
<text-document v-bind:title.sync="doc.title"></text-document>e
二、使用实例
子组件:
<template>
<div>
<p>这个是子组件,此时show的值是{{show}}</p>
<button @click.stop="closeDiv">子组件给父组件更新值为false</button>
</div>
</template>
<script>
export default {
props:['show'],
methods:{
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}
}
</script>
父组件:
<template>
<div class="details">
<h1>vue 父子组件传值sync修饰符</h1>
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<p>此为父组件 show的值为 {{valueChild}}</p>
<button @click="changeValue">toggle</button>
<myComponent :show='valueChild' v-on:update:show="title = $event" style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<p>为证明子组件的事件不会改变子组件的值,此为父组件 show的值为 {{valueChild}} title的值为 {{ title }}</p>
</div>
</template>
<script>
import myComponent from '@/components/sync-component.vue'
export default{
components:{myComponent},
data(){
return{
valueChild:true,
title:'hello world'
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
参考:
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6