.sync修饰符

.sync修饰符相当于将值传递到子组件，并且监听这个值得变化

1. .sync传递单个值

<template>
	<div id = "app">
		<div>
			<test-sync :show.sync = "show"></test-sync>
		</div>
	</div>
</template>

import TestSync from './components/testSync.vue';
export default{
	name:'App',
	data(){
		return{
			show:false
		}
	}
}

testSync组件

<template>
	<div>
		<h1>
			.sync修饰符的使用----{{show}}
		</h1>
		<button @click="testSync">
			测试.sync修饰符
		</button>
	</div>
</template>

export default {
	name:'TestSync'
	props:{
		show:{
			type:Boolean,
			required:true
		}
	},
	methods:{
		testSync(){
			this.$emit("update:show",!this.show)
		}
	}
}

2. .sync传递对象
   .sync 传递对象是分别将对象的键值对传递到子组件，在子组件中要使用props分别接收
   传递对象时建议使用 v-bind.sync="OOO"
   传递单个值是建议使用 :xxx.sync="OOO"

<template>
	<div id = "app">
		<div>
			<test-sync v-bind.sync="defautDialog"></test-sync>
		</div>
	</div>
</template>

import TestSync from './components/testSync.vue'
export default{
	name:'App',
	data(){
		return{
			defaultDialog:{
				title:'测试.sync修饰符传递对象'，
				visible:false
			}
		}
	}
}

TestSync组件

<template>
	<div>
		<h1>
			.sync修饰符的使用----{{defaultDialog.title}}----{{default.visible}}
		</h1>
		<button @click="testSync">
			测试.sync修饰符
		</button>
	</div>
</template>

export default {
	name:'TestSync',
	props:{
		title:{
			type:String,
			required:true
		},
		visible:{
			type:Boolean,
			required:true
		}
	},
	methods:{
		testSync(){
			this.$emit('update:title',this.title.split('').reverse().join(''))
			this.$emit('update:visible', !this.visible)
		}
	}
}