使用 v-model 將 dialog '偽裝'成 input ,實作父子雙向資料流

子組件：

<template>
    <p v-if="value">
        <a href="javascript:;" @click="close">关闭</a>
    </p>
</template>
<script>
export default {
    props:{
        value:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            isShow: this.value
        }
    },

    methods: {
        close() {
            this.isShow = false
            this.$emit("input", this.isShow)
        }
    }
}
</script>

父：

<Child v-model="showDialog"></Child>
data:{
    showDialog:false
}

這樣，父級改變 showDialog 可實現隱藏/顯示，而子元件呼叫 close 也會更新 showDialog 的值

官方文件 https://cn.vuejs.org/v2/guide...使用自訂事件的表單輸入元件