安装 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'

第一种方式

子组件

<el-dialog @close="$emit('toogle', false)" :visible.sync="currentIsShow"></el-dialog>

<script lange="ts">
import { Component, Vue } from 'vue-property-decorator'
    
export default class Email extends Vue {
    @Prop() isShow!: boolean // 是否默认显示
    currentIsShow = false
    @Watch('isShow')
    onChangeValue(newVal: boolean){
        this.currentIsShow = newVal
    }
}
</script>

父组件

<SetEmail :isShow="setEmailShow" :verify="true" @toogle="setEmailToogle"></SetEmail>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
    
export default class Parent extends Vue {
    // 邮箱 dialog
    setEmailShow = false
    setEmailToogle (flag: boolean) {
       this.setEmailShow = flag
    }
}
</script>

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

子组件

<el-dialog @close="$emit('update:show', false)" :visible.sync="visible"></el-dialog>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
    
export default class Email extends Vue {
    // 显示切换
    @Prop() show!: boolean
    visible = false
    @Watch('show')
    onChangeValue(newVal: boolean){
        this.visible = newVal
    }
}
</script>

父组件

<set-email :show.sync="setEmailShow" :verify="false"></set-email>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
    
export default class Parent extends Vue {
    setEmailShow = false // 修改邮箱
}
    
</script>

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

别急，还有更方便的

子组件

<el-dialog @close="$emit('update:show', false)" :visible.sync="visible"></el-dialog>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
    
export default class Email extends Vue {
    @PropSync('show') visible!: boolean // 显示切换
}
</script>

父组件

<set-email :show.sync="setEmailShow" :verify="false"></set-email>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
    
export default class Parent extends Vue {
    setEmailShow = false // 修改邮箱
}
    
</script>

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