前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[ Vue ] 理解 vue 中修饰符 sync 的作用

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

原创
作者头像
GavinUI
发布2021-05-28 16:23:55
3.8K0
发布2021-05-28 16:23:55
举报
文章被收录于专栏:GavinUI

修饰符 sync 的作用:

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

组件数据更新实现方法:

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

代码语言:txt
复制
<!-- 父级组件:-->
<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>
代码语言:txt
复制
<!-- 子级组件:-->
<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" , 如下图,

代码语言:txt
复制
<!-- 父级组件:-->
<template>
	<div>
    <rules-modal :isShow="isShowRules"
    							@update:isShow="isShow => isShowRules = isShow">
    </rules-modal>
	</div>
</template>
<script>
export default {
    data(){
    	return{
    		isShowRules : false,
    	}
    },
};
</script>
代码语言:txt
复制
<!-- 子级组件:-->
<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" 的语法糖,是一种简写的形式。

代码如下:

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

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

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

代码语言:txt
复制
<!-- 子级组件:-->
<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 的原理和使用。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 修饰符 sync 的作用:
  • 组件数据更新实现方法:
    • 优化步骤一:
      • 优化步骤二:
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档