.sync 修饰符所提供的功能。当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。
父组件
<wordInput :wordVal.sync='inputVal'/>
他会扩展成:
<wordInput :wordVal='inputVal' @update:wordVal="val => inputVal= val"/>
然后你需要在子组件中改变父组件数据的时候, 需要触发以下的自定义事件:
this.$emit('update:wordVal', val)
子组件
<template>
<div>
<input type="text" class="inputs" v-model="wordValShow">
</div>
</template>
<script>
export default {
name: 'wordInput',
props:{
wordVal:{
type:String,
default:''
}
},
data(){
return {
wordValShow:this.wordVal
}
},
watch:{
wordValShow(val){
this.$emit('update:wordVal', val)
}
}
}
</script>