Vue控制子元件的顯示隱藏的四種辦法

1. v-model

//使用
<Model  v-model="Model" >
</Model>
// data 中   model :false

// 子元件
<template>
    <transition name="model" tag="div">
        <div class="model" v-if="value" >
            DOM
        </div>
    </transition>
</template>
<script>
export default {
  props: {
    value: { type: Boolean, default: false },
  },
  data() {
    return {};
  },
  methods: {
    ConfirmHandler() {
      this.$emit("input", false); 
      this.$emit("Confirm"); 
    },
    CancelHandler() {
      this.$emit("input", false); 
      this.$emit("Cancel"); 
    }
  }
};
</script>


解析：
<input v-model="text" />
等同於如下，model為@input的一個糖語法
<input  :value="text"  @input="e => text = e.target.value"/>

由此推算，子元件可以通過value獲取父元件傳來的值，可用$emit("input")觸發父元件的方法input方法

2 .sync 修飾符

//使用

<Model  :visible.sync="Model" >
</Model>

// data 中   model :false


// 子元件
<template>
    <transition name="modal" tag="div">
        <div class="model" v-if="visible" >
            DOM
        </div>
    </transition>
</template>
<script>
export default {
  props: {
    visible: { type: Boolean, default: false },
  },
  data() {
    return {};
  },
  methods: {
    ConfirmHandler() {
      this.$emit("update:visible", false); 
      this.$emit("Confirm"); 
    },
    CancelHandler() {
      this.$emit("update:visible", false); 
      this.$emit("Cancel"); 
    }
  }
};
</script>
解析：
<Model:visible.sync="dialogVisible" />

<Model
 :visible="Visible"
 @update:visible="newVisible => Visible = newVisible"
/>

ref 呼叫子元件方法

// 使用
<Model  ref="Model" > </Model>

methods:{
    ChangeModel(){
             this.$refs.Model.show()
    }
}
//子元件
<template>
    <transition name="modal" tag="div">
        <div class="model" v-if="model" >
            DOM
        </div>
    </transition>
</template>
<script>
export default {
  data() {
    return {
        model:false,
    };
  },
  methods: {
    show(){
        this.model = true
    },
    ConfirmHandler() {
        this.show()
        this.$emit("Confirm"); 
    },
    CancelHandler() {
        this.show()
        this.$emit("Cancel"); 
    }
  }
};
</script>

在元件外通過Props控制顯示隱藏

監聽子元件的回撥函式，通過Props控制子元件的顯示隱藏。比較簡單。

Ps：暫時發現四中辦法，很多UI元件都是通過v-model來控制元件的顯示隱藏，這種使用起來程式碼看著更美觀。 狀態修改，第一、二、四種都是在元件外修改的狀態，第三種是在元件內部修改狀態。