巧用PropSync封装弹窗组件

安装 Element-ui

由于我们项目采用的是 vue + ts + element-ui，这里我们谈的是如何二次封装Element-ui的 dialog组件

npm i element-ui -S

/plugins/element.ts

import Vue from 'vue'
import Element from 'element-ui'
import '../element-variables.scss'

Vue.use(Element)

/main.ts

import './plugins/element.js'

第一种方式

子组件

父组件

但是由于 vue 提供了 .sync，所以我们可以更加方便的方式

子组件

父组件

没错，使用 .sync能让我们不需要监听事件变动而修改父级变量

别急，还有更方便的

子组件

父组件

这里的 @PropSync又能让我们在子组件中减少一部分代码。