.sync 修饰符：进行父子组件间相互传递数据

允许prop进行双向绑定，以this.$emit(update:PropName,newValue)的模式触发事件。

<text-document v-bind:title.sync="doc.title"></text-document>
复制代码

相当于：

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

以在index.vue下引入childrenOne子组件为例，使用.sync属性，会在mounted生命周期里面alert弹出childrenOne，而不是index。

<template>
	<div class="vuexWrap common">
			<childrenOne :title.sync="doc.title"></childrenOne>
		</div>
	</div>
</template>
<script type="text/javascript">
	import childrenOne from '../../components/childrenOne.vue'
	export default{
		data () {
			return {
				doc:{
					title:'index'
				},
			}
		},
		mounted (){
             //childrenOne
			alert(this.doc.title);
		},
		components : {
			childrenOne
		}
	}
</script>
复制代码

在childrenOne.vue的生命周期mounted里面通过 this.$emit('update:title', this.newTitle); 设置title属值

<template>
	<div class="OneWrap common">
		{{title}}
	</div>
</template>
<script type="text/javascript">
	export default{
		props:{
			title:""
		},
		data () {
			return {
				newTitle:"childrenOne"
			}
		},
		mounted (){
			this.$emit('update:title', this.newTitle);
		},
	}
</script>
复制代码