阅读 54
[ Vue ] 理解 vue 中修饰符 sync 的作用

[ Vue ] 理解 vue 中修饰符 sync 的作用

修饰符 sync 的作用:

sync 修饰符的作用就是实现父子组件数据的双向绑定,简化功能逻辑代码 。当然,v-model 也是可以实现数据的双向绑定,但是,一个组件只有一个 v-model,所以 , v-model 只能针对一个变量进行数据绑定,而 sync 修饰符可以实现多个参数的数据双向绑定。

组件数据更新实现方法:

在不依赖双向绑定的标签或者 v-model 方法下,父子数据的更新就是通过绑定函数在父级组件中更新数据。

<!-- 父级组件:-->
<template>
	<div>
    <rules-modal :isShow="isShowRules"
    							@clickModal="modalTrigger">
    </rules-modal>
	</div>
</template>
<script>
export default {
    data(){
    	return{
    		isShowRules : false,
    	}
    },
    methods: {
        modalTrigger($Event){
            this.isShowRules = $Event;
        },
    },
};
</script>
复制代码
<!-- 子级组件:-->
<template>
    <div v-if="isShow" class="rules-modal">
       <p @click="closeModal()">嗯嗯</p>
    </div>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        closeModal() {
           this.$emit('clickModal',false);
        }
    },
};
</script>
复制代码

优化步骤一:

将父组件的 @clickModal 改为 @update:isShow 同时,将 $emit 方法更新为 update:isShow, 父组件的子组件引用绑定方法 也可以改成匿名函数,变成 @update:isShow="isShowRules = !isShowRules" , 如下图,

<!-- 父级组件:-->
<template>
	<div>
    <rules-modal :isShow="isShowRules"
    							@update:isShow="isShow => isShowRules = isShow">
    </rules-modal>
	</div>
</template>
<script>
export default {
    data(){
    	return{
    		isShowRules : false,
    	}
    },
};
</script>
复制代码
<!-- 子级组件:-->
<template>
    <div v-if="isShow" class="rules-modal">
       <p @click="closeModal()">嗯嗯</p>
    </div>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        closeModal() {
           this.$emit('@update:isShow',false);
        }
    },
};
</script>
复制代码

优化步骤二:

将父组件 :isShow="isShowRules" 加上 sync ,变成 :isShow.sync="isShowRules" ,sync 如果用一句话来说就是同步更新了子组件的数据变化,而从实现的角度来说就是 sync 就是@update:isShow="isShow => isShowRules = isShow" 的语法糖,是一种简写的形式。 代码如下:

<!-- 父级组件:-->
<template>
	<div>
    <rules-modal :isShow.sync="isShowRules">
    </rules-modal>
	</div>
</template>
<script>
export default {
    data(){
    	return{
    		isShowRules : false,
    	}
    },
};
</script>
复制代码

到了这里,已经可以完成一个基本的 modal 的显示和隐藏的实现,实现的逻辑比一开始的要简单得多,不需要将更新数据的逻辑交给父级组件来实现数据更新,只要给绑定的数据加上一个同步更新的标记就可以,是非常易于理解的。

需要注意的点是,通常在业务逻辑处理中,父级组件传递给子级组件的一般不仅只有一个 boolean值,肯定会有数组或者对象传入做逻辑处理。而子级组件是不能直接修改 prop 的参数的,可以使用一个 watch 接收,再赋予一个新值。把数据处理完毕 再同步更新到父级组件,这里就还是用一个 boolean 来举例:

<!-- 子级组件:-->
<template>
    <div v-if="isShow" class="rules-modal">
       <p @click="closeModal()">嗯嗯</p>
    </div>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            isShowModal: null,
        };
    },
    methods: {
        closeModal() {
           this.isShowModal = false; 
           this.$emit('update:isShow',this.isShowModal);
        }
    },
    watch: {
        isShow: {
            handler: function (nv, ov) {
            		this.isShowModal = nv;
            },
            deep: true,
            immediate: true
        },
    },
};
</script>
复制代码

触发数据更新之后没有报错,就说明可以了,以上就是关于 .sync 的原理和使用。

qrcode_for_gh_3494d960fc51_344.jpg

文章分类
前端
文章标签