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来控制组件的显示隐藏，这种使用起来代码看着更美观。 状态修改，第一、二、四种都是在组件外修改的状态，第三种是在组件内部修改状态。