Vue制御サブアセンブリの表示非表示の4つの方法

1. v-model

//  


// data     model :false

//    


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"); 
    }
  }
};



  ：

     ，model @input      
 text = e.target.value"/>

    ，       value         ，  $emit("input")        input  

2.sync修飾子

//  




// data     model :false


//    


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"); 
    }
  }
};

  ：


 Visible = newVisible"
/>

ref呼び出しサブコンポーネントメソッド

//   
 

methods:{
    ChangeModel(){
             this.$refs.Model.show()
    }
}
//   


export default {
  data() {
    return {
        model:false,
    };
  },
  methods: {
    show(){
        this.model = true
    },
    ConfirmHandler() {
        this.show()
        this.$emit("Confirm"); 
    },
    CancelHandler() {
        this.show()
        this.$emit("Cancel"); 
    }
  }
};

コンポーネント外でのProps制御による表示非表示
サブコンポーネントのコールバック関数をリスニングし、Propsでサブコンポーネントの表示非表示を制御します.比較的簡単です.
Ps:一時的に4つの方法を発見し、多くのUIコンポーネントはv-modelを通じてコンポーネントの表示隠しを制御しており、この使用はコードがより美しく見えます.ステータス修正、第1、第2、4はすべてコンポーネントの外で修正されたステータスで、第3はコンポーネントの内部でステータスを修正します.