vue父子组件之模态框状态绑定的示例分析-创新互联
小编给大家分享一下vue父子组件之模态框状态绑定的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、
做网站、网站建设易于使用并且具有良好的响应性。
日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如：
//点击打开新增弹窗
//点击打开编辑弹窗
//点击打开详情弹窗
子组件：
如何实现子组件和父组件模态框状态的同步
方案一：使用.sync 修饰符
父组件：
//点击打开新增弹窗
新增
子组件：
方案二：使用v-model
父组件：
//点击打开新增弹窗
新增
子组件：
computed OR watch ?
对于上面的两种方案，子组件内部还可以使用计算属性的写法
computed
export default {
props: {
show: {
type: Boolean
}
},
computed: {
dialogVisible: {
get() {
return this.show
},
set(value) {
return this.$emit('input', value)
},
},
},
methods: {
handleClose(val) {},
},
}以上是“vue父子组件之模态框状态绑定的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
名称栏目：vue父子组件之模态框状态绑定的示例分析-创新互联
转载来于：http://chengdu.cdxwcx.cn/article/djogcd.html
