Vue中props .sync修饰符的使用示例

前文

• 一般情况下我们由父组件传递给子组件的对象并不想在子组件修改对象时改变父组件对象的原数据。
• 这种情况通常在watcher时是使用深度克隆对象供子组件使用，避免某些在数据改变时渲染bug问题
• 但是有一些特殊的得情况需要更新父组件中的数据。这就是下面要说 .sync修饰符

正文

• 我们有两个组件
• 父组件 views2

<template>
	<div>
		<div>{{str}}</div>
		<SyncViews :dataSync.sync="tabDataSync"></SyncViews>
	</div>
</template>
<script>
	import SyncViews from './cComponent/syncViews'
  export default {
    components : {SyncViews},
    mixins : [],
    name : "",
    data () {
      return {
		str: '789,456',
        tabDataSync:{
				  label:'nnn',
					value:'sss'
				}
			}
    },
  }
</script>

• 子组件 syncViews

<template>
	<div>
		<p v-for="key in tabData" :key="key">{{key}}</p>
		<button @click="change">111</button>
	</div>
</template>
<script>
	import {extendClone} from '../../utils'
  export default {
    components : {},
    mixins : [],
    name : "syncViews",
    data () {
      return {
        tabData:{},
		}
    },
    props : {
      dataSync:Object
	},
    computed : {},
    watch : {
      dataSync:{
        handler(org){
          this.tabData = extendClone(org)
        },
		deep:true,
		immediate:true
		}
	},
    methods : {
			change(){
		        this.tabData["time"] = '111';
		        this.$emit('update:dataSync', this.tabData)
			},
		},
  }
</script>

实例加载后我们我在控制台工具中看到一内容

以为使用 深度克隆对象 我们在操作子组件中change方法时 父组件中的数据不会被改变， change方法在对象中添加了一个key
一些情况中我必须使用深度克隆来让父组件中的数据保持原状

本文的标题来了， 既然使用了深度克隆对象， 改变子组件时父组件数据不会被改变了， 那么我怎么能让父组件中的对象自动更新子组件中已改变的值呢？
vue 官方文档是这么描述的。 我们可以使用 $emit(‘update:data’)

• 在本文例子中 syncViews子组件中 change方法，使用 update更新 dataSync, 值为 子组件克隆的对象

  this.$emit('update:dataSync', this.tabData)

• 剩下只需要在父组件向props传递时 加上.sycn 即可
  

• 父组件数据得到更新
  

• ps：以上实例参考 vue官方文档 .sycn修饰符 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符