1.作用
可以實現(xiàn) 子組件 與 父組件數(shù)據(jù) 的 雙向綁定，簡化代碼
簡單理解：子組件可以修改父組件傳過來的props值
2.場景
封裝彈框類的基礎(chǔ)組件博个， visible屬性 true顯示 false隱藏
3.本質(zhì)
.sync修飾符 就是 :屬性名 和 @update:屬性名 合寫
4.語法
父組件
//.sync寫法
<BaseDialog :visible.sync="isShow" />
//完整寫法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" />
子組件
props: {
visible: Boolean
},
this.$emit('update:visible', false)
5.代碼示例
// 父組件
<template>
<div>
<button @click="visible = true">顯示</button>
<!-- sync可以簡化父子傳值 -->
<MyDialog :visible.sync="visible"></MyDialog>
<!-- $event 用于在模板中讹蘑，獲取事件的形參 -->
<!-- <MyDialog :visible="visible" @update:visible="visible=$event"></MyDialog> -->
<!-- :屬性.sync="變量" 等同于 :屬性="變量" + @update:屬性="xxx"-->
</div>
</template>
data () {
return {
visible:false // 控制彈出框是否顯示
}
},
// 子組件彈窗
<template>
<div class="dialog" v-show="visible">
<div class="dialog-header">
<h3>友情提示</h3>
<span class="close" @click="close">??</span>
</div>
<div class="dialog-content">我是文本內(nèi)容</div>
<div class="dialog-footer">
<button>取消</button>
<button>確認</button>
</div>
</div>
</template>
<script>
export default {
props:["visible"],
methods: {
close() {
// this.$emit('自定義事件名', false)
this.$emit('update:visible', false)
}
}
</script>
