.sync修饰符本质上是语法糖 用于子组件可以修改父组件。
传统上可以这样做：
子组件，发射事件
<template>
<div class="child" style="border: 1px dotted red">
<input type="text" @input="handleOuter" v-model="innerText">
<div>等待被内部组件修改</div>
</div>
</template>
<script>
export default {
name: 'Child',
data () {
return {
innerText: '',
}
},
methods: {
// 修改内容时发射事件，然后在父组件接收
handleOuter(e) {
console.log(e);
this.$emit('update:outer', this.innerText);
},
},
}
</script>父组件：
<template>
<div style="border: 1px dotted blue">
<h1>父子组件数据传递</h1>
<h3>Parent:</h3>
<div v-text="fromInner"></div>
<h3>Child:</h3>
<!-- 接收事件并实时更新父组件的 fromInner 属性 -->
<i-child @update:outer="val => fromInner = val"/>
</div>
</template>
<script>
import Child from './child';
export default {
name: 'Parent',
components: {
'i-child': Child
},
data () {
return {
fromInner: '',
}
},
methods: {
},
}
</script>使用 .sync后 <i-child :outer.sync="fromInner"/>
需要注意的是sync要写在子组件上面
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。