Vue3下使用element-plus el-dialog创建自定义的模态对话框

文章目录

  • 1 父子组件传递参数
  • 2 实现
  • 3 父子组件代码

1 父子组件传递参数

这是实现父组件打开子组件,子组件关闭时通知父组件必须要解决的问题。vue2中使用.sync可以很好的解决这个问题,网上资料也多半是关于这些。但是vue3中.sync被废弃,由v-model取代。
详情请仔细阅读官网资料link。这里也建议大家,对框架、组件的问题,尽可能先看官网资料。

2 实现

  • 子组件的打开、关闭由父组件通过改变父组件的showTemeEdit属性实现
  • 子组件向外曝露的props参数showTemeEdit有数据单向传递原则限制,需借助定义计算属性isShow曲线实现双向传递
  • 子组件发起事件context.emit("update:showThemeEdit", *),来具体实现双向传递
  • 通过子组件定义 v-bind="$attrs",实现父组件自由定义子组件所需属性

3 父子组件代码

子组件ThemeEdit.vue

你可能感兴趣的:(Vue3,#,vue3项目实例,vue,elementui,前端)