安裝 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 // 是否默認(rèn)顯示
    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能讓我們不需要監(jiān)聽事件變動而修改父級變量

別急浓瞪，還有更方便的

子組件

<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又能讓我們在子組件中減少一部分代碼。