做简单网站的步骤,西安地区专业做网站公司,石家庄视频网站建设公司,蓝色经典网站.sync的作用#xff1a;
可以实现子组件与父组件数据的双向绑定#xff0c;简化代码。
与v-model的不同点,prop属性名可以自定义#xff0c;不要一定要用value.
.sync的本质#xff1a;
就是#xff1a;属性名和update#xff1a;属性名合写。
下面我们进行代码演示….sync的作用
可以实现子组件与父组件数据的双向绑定简化代码。
与v-model的不同点,prop属性名可以自定义不要一定要用value.
.sync的本质
就是属性名和update属性名合写。
下面我们进行代码演示 效果是什么呢点击按钮出现弹框。 2.完成点击叉号弹框消失。 效果图 在该例子中: :visible.sync :visible update:visible 3.最后附上代码
App.vue(父组件)
templatediv classappbutton clickisShow!isShow退出按钮/button!-- 这里进行一个父传子 --!-- :visible.sync :visible update:visible --BaseDialog :visible.syncisShow/BaseDialog/div
/templatescript
import BaseDialog from ./components/BaseDialog.vue
export default {data() {return {isShow:false}},methods: {},components: {BaseDialog,},
}
/scriptstyle
/style
BaseDialog.vue子组件
templatediv classbase-dialog-wrap v-showvisiblediv classbase-dialogdiv classtitleh3温馨提示/h3button clickClose classclosex/button/divdiv classcontentp你确认要退出本系统么/p/divdiv classfooterbutton确认/buttonbutton取消/button/div/div/div
/templatescript
export default {props:{visible:Boolean},methods:{Close(){this.$emit(update:visible,false)}}
}
/scriptstyle scoped
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
/style
