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-修饰符
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年03月13日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录