父组件中引入弹窗子组件三种写法

1、props和$emit控制弹窗显示隐藏

• 父组件

<template>
  <div class="about">
    <a-button type="primary" @click="show = true"> 打开弹窗 </a-button>
    <popup :show="show" @change="show = false"></popup>
  </div>
</template>
<script>
import popup from "../components/popup";
export default {
    
    
  data() {
    
    
    return {
    
    
      show: false,
    };
  },
  components: {
    
    
    popup,
  },
};
</script>

• 子组件

<template>
  <div>
    <a-modal
      v-model="show1"
      title="Basic Modal"
      @cancel="handleOk"
      @ok="handleOk"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  props: ["show"],
  computed: {
    
    
    show1: {
    
    
      get() {
    
    
        return this.show;
      },
      set() {
    
    },
    },
  },
  methods: {
    
    
    handleOk(e) {
    
    
      this.$emit("change", false);
    },
  },
};
</script>

v-model控制弹窗显示隐藏

<template>
  <div class="about">
    <a-button type="primary" @click="show = true"> Open Modal </a-button>
    <popup v-model="show"></popup>
  </div>
</template>
<script>
import popup from "../components/popup";
export default {
    
    
  data() {
    
    
    return {
    
    
      show: false,
    };
  },
  components: {
    
    
    popup,
  },
};
</script>

<template>
  <div>
    <a-modal
      v-model="show1"
      title="Basic Modal"
      @cancel="handleOk"
      @ok="handleOk"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  model: {
    
    
    prop: "show", //接受v-model的值
    event: "change", //改变v-model的值得方法，第二个参数直接赋值给他
  },
  props: ["show"],
  computed: {
    
    
    show1: {
    
    
      get() {
    
    
        return this.show;
      },
      set() {
    
    },
    },
  },
  methods: {
    
    
    handleOk(e) {
    
    
      this.$emit("change", false); //直接改变v-model的值
    },
  },
};
</script>

$refs直接调取子组件的方法

<template>
  <div class="about">
    <h1 @click="$router.push('./test')">This is an about page</h1>
    <a-button type="primary" @click="$refs.pop.init()"> Open Modal </a-button>
    <popup ref="pop"></popup>
  </div>
</template>
<script>
import popup from "../components/popup";
export default {
    
    
  components: {
    
    
    popup,
  },
};
</script>

<template>
  <div>
    <a-modal
      v-model="show"
      title="Basic Modal"
      @cancel="handleOk"
      @ok="handleOk"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      show: false,
    };
  },
  methods: {
    
    
    init() {
    
    
      this.show = true;
    },
    handleOk(e) {
    
    
      this.show = false;
    },
  },
};
</script>