弹窗设置(父子传参原理)

父组件:

1.父组件向子组件传递数据
父组件绑定属性,给子组件传递数据
子组件通过props接收父组件传递过来的数据
子组件向父组件传递数据

2.父组件自定义事件,并绑定函数
子组件使用$emit触发父组件的自定义事件,并带上数据

<template>
  <div>
    <Dialog :msg="msg" :show="show" @yes="yes" @no="no"/>
    <p>
      <button @click="showDialog">显示弹框</button>
    </p>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog";
import { constants } from "fs";
export default {
  data() {
    return {
      msg: "你好吗",
      show: false
    };
  },
  components: {
    Dialog
  },

  methods: {
    showDialog() {
      this.show = true;
    },
    yes(data) {
      // 关闭弹窗
      this.show = false;
      alert("你点击了确定");
    },
    no(data) {
      // 关闭弹窗
      this.show = false;
      // todo
      alert("你点击了取消");
    }
  }
};
</script>

<style>
</style>

子组件:

<template>
  <div v-show="show">
    <!-- 蒙层 -->
    <div class="pop"></div>
    <div class="box">
      <h3>温馨提示</h3>
      <div class="content">{{msg}}</div>
      <p>
        <button @click="ok">确认</button>
        <button @click="cancel">取消</button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["msg", "show"],

  methods: {
    ok() {
      this.$emit("yes", "ok");
    },
    cancel() {
      this.$emit("no", "cancel");
    }
  }
};
</script>

<style scoped>
.pop {
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}

.box {
  display: inline-block;
  /* width: 300px; */
  /* height: 200px; */
  position: fixed;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
  left: 50%;
  z-index: 2;
  background: #fff;
  padding: 50px 100px;
}
</style>