.sync修饰符

85 阅读1分钟

sync可以实现porps的双向绑定(实际上也是语法糖) 父组件给子组件通过porps传参 子组件修改porps得到的的参数 然后父组件的参数也能同步更新 语法如下

//子组件
<template>
    <div>
        {{name}}
        <button @click="mma">zi</button>
    </div>
</template>
<script>
export default {
     props:['name'],
    methods: {
    sonChangeName (){
        this.$emit('update:name','knm') //update:xxx xxx是porps参数的名字
    }
}
}
</script>

·····················

//父组件
<template>
    <div>
        {{xxname}}
      <zi :name.sync="xxname"></zi>
    </div>
</template>
<script>
import zi from './zi.vue'
export default {
    data() {
        return {
            sum:10,
            xxname:'妈的'
        };
    },
    components: {
        zi,
    },
};
</script>