.sync实现父子组件的双向绑定数据

.sync 修饰符所提供的功能。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

父组件
<wordInput :wordVal.sync='inputVal'/>

他会扩展成：

<wordInput :wordVal='inputVal' @update:wordVal="val => inputVal= 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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容