.sync作用
实现父子组件数据之间的双向绑定，与v-model类似。
类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。
.sync与v-model区别是
-
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
-
区别点：
-
格式不同。
v-model="num", :num.sync="num" -
v-model： @input + value
-
:num.sync: @update:num
-
v-model只能用一次；.sync可以有多个。
-
对话框封装
1.父组件
<template>
<div >
<button @click="visible=true">这是一个弹框</button>
<Mydialog :visible.sync='visible'></Mydialog>
</div>
</template>
<script>
import Mydialog from './Mydialog.vue'
export default {
name: 'App',
components:{
Mydialog
},
data() {
return {
visible:false
};
},
mounted() {
},
methods: {
},
};
</script>
2.子组件
<template>
<div class="abc" v-show='visible'>
<h2>这是一个对话框</h2>
<button @click="close">关闭</button>
<div class="aaa" v-show='visible2'>
<h3>确认要关闭吗？</h3>
<button @click="confirm">确认</button>
<button @click='cancel'>取消</button>
</div>
</div>
</template>
<script>
export default {
name: 'Mydailog',
data(){
return {
visible2:false
}
},
props:{
visible:{
type:Boolean,
}
},
methods: {
close(){
this.visible2=true
},
confirm(){
this.$emit("update:visible",false)
},
cancel(){
this.visible2=false
}
}
}
</script>
