vue .sync 语法糖

关于.sync

在了解这个语法糖时,首先我们要了解的是vue组件之间的通信规则是单向数据流即:

vuet提倡单向数据流,即父级 props 的更新会流向子组件,但是反过来则不行。这是为了防止意外的改变父组件状态,使得应用的数据流变得难以理解。如果破坏了单向数据流,当应用复杂时,debug 的成本会非常高。

我们一般的做法是:

//父组件
<template>
	<right-toolbar :show-search="showSearch" @targger="reverseTem"></right-toolbar>
</template>
<script>
import rightToolbar from "@/comoinents/rightToolbar";
export default {
    name: 'Parent',
    components: {
        rightToolbar
    },
    data() {
        return {
            showSearch: true,
        };
    },
    methods: {
        reverseTem(){
			this.showSearch = !this.showSearch
		},
    }
};
</script>
//子组件
<template>
	<div>
		<div v-show="showSearch">我是显示隐藏控件</div>	
		<button @click="handleBtnClick">按钮</button>
	</div>
	
</template>
<script>
export default {
    name: 'children',
    props{
		showSearch(){
			type:Boolean,
			default:true
		}
	},
    methods: {
        handleBtnClick(){
			this.$emit('targger')
		}
    }
};
</script>

上面我们就能够实现控制组件中元素单元的显示与隐藏功能了,但是这样写给人的感觉就是非常的繁琐,还很绕所以:

.sync 修饰符

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:

<text-document v-bind:title.sync="doc.title"></text-document>

引申到我们的示例中:

//父组件
<template>
	<right-toolbar :showSearch.sync="showSearch"></right-toolbar>
</template>
<script>
import rightToolbar from "@/comoinents/rightToolbar";
export default {
    name: 'Parent',
    components: {
        rightToolbar
    },
    data() {
        return {
            showSearch: true,
        };
    }
};
</script>
//子组件
<template>
	<div>
		<div v-show="showSearch">我是显示隐藏控件</div>	
		<button @click="handleBtnClick">按钮</button>
	</div>
	
</template>
<script>
export default {
    name: 'children',
    props{
		showSearch(){
			type:Boolean,
			default:true
		}
	},
    methods: {
        handleBtnClick(){
			this.$emit('update:showSearch',!this.showSearch)
		}
    }
};
</script>

注意: 必须要使用update:myPropName的形式添加自定义事件

你可能感兴趣的:(JavaScript,vue.js,javascript,前端)