vue修饰符sync

Posted 2021-02-20 zxuedong

vue修饰符sync

 

1.sync介绍：vue是单向数据流，也就意味着子组件是无法修改父组件传过来的参数，只能通过自定义事件通知父组件去修改，sync解决了这个问题，单其实sync并没有改变单向数据流，只是简化了步骤，其实就是一个语法糖

// 子组件

<template>

    <div>{{ value }}</div>

    <button @click="fn">改变value的值</button>

</template>

<script>
export default {

   name: ‘DongDialog‘,

   props: {

        value: {
            
            type: String

            default: ‘你好sync‘
        }
   },

    methods: {

        fn () {

           // 如果点击按钮修改父组件传过来的value值的话会报错
        
            this.value = ‘你好美女‘    // 报错

            // 使用sync的语法糖来解决

            /*

                注意update冒号后面的对应值必须是父组件穿归来的数据

                第二个参数是需要修改的值
            */
            this.$emit(‘update:value‘, ‘我去天气好热‘)"
        }
    }
}
</script>    



// 父组件

<template>
    
    <!--注意父组件要加上sync修饰符-->
    <dialog :value.sync="value"></dialog>  

</template>

<script>
import dialog from ‘../../components/Dialog‘
export default {

    name: ‘parent‘,

    data () {
    
        return {

            value: ‘漂亮的大美女‘
        }
    },

    components: {

        dialog 
    }
}
</script>