使用v-model封裝el-dialog組件實現雙向綁定

使用v-model封裝el-dialog組件實現雙向綁定

一直以來都是經過子組件$emit("update:name",payload)，父組件使用.sync事件後綴來實現雙向綁定的，經提醒發現使用v-model封裝自定義組件則更方便理解與使用，因而有了此次嘗試與這篇文章

一個彈框做爲一個組件，一個變量控制dialog顯示和關閉,在dialog內部可關閉,父組件也可關閉

<template>
  <div>
    <!-- 父組件使用該組件，v-model的值能夠是任意變量 -->
    <dialog-a
      v-model="show1"
      other-prop="8888"
    />
    <el-button @click="handleOpenDialog">顯示彈框</el-button>
  </div>
</template>

<script>
import DialogA from './dialog-a'
export default {
  components: {
    DialogA
  },
  data() {
    return {
      show1: false
    }
  },
  methods: {
    handleOpenDialog() {
      this.show1 = true
    }
  }
}
</script>

// 子組件
<template>
  <el-dialog
    title="我是彈框A"
    :visible="show"
    width="80%"
    @close="handleCloseElementDialog"
  >
    <!--
    須要監聽close事件
    不能使用 v-on="$listeners"進行事件透傳,
    由於el-dialog的close事件無參數,會把show設置爲undefined,
    父組件的變量即會被設置爲undefined
    能夠使用自定義事件進行一次包裝
    -->
    <div>
      <div>{{ otherProp }}</div>
      <el-button @click="handleCloseElementDialog">關閉彈框</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'DialogA',
  model: {
    prop: 'show',
    event: 'my-close'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 其餘props
    otherProp: {
      type: String,
      default: 'otherProp'
    }
  },
  methods: {
    handleCloseElementDialog() {
      this.$emit('my-close', false)
    }
  }
}
</script>