弹框组件封装

弹框组件封装

组件内使用，可以使用插槽改变值

局部封装
html:(父组件 ）

<template>
  <div>
    <button @click="btn">封装弹框组件</button>
    <TanKuang @qd="qd" @qx="qx" v-show="flag">
      <h2 slot="title">提示语</h2>
      <h2 slot="content">弹框的内容</h2>
    </TanKuang>
  </div>
</template>

js:

<script>
import TanKuang from "../components/TanKuang";
export default {
  props: {}, // 组件参数 接收来自父组件的数据
  data() {
    return {
      //模拟数据
      //   刚开始弹框隐藏
      flag: false
    };
  },
  created() {
    //创建后
  }, // 局部注册的组件
  components: {
    TanKuang
  },
  mounted() {
    //加载后
  },
  watch: {}, // 负责监听
  computed: {}, // 计算属性
  methods: {
    //方法集合
    // 点击button按钮   显示隐藏
    btn() {
      this.flag = !this.flag;
    },
    // 点击确定
    qd() {
      this.flag = false;
    },
    // 点击取消
    qx() {
      this.flag = false;
    }
  }
};
</script>

子组件：

<template>
    <div class="lcj_box">
        <slot name="title">标题</slot>
        <div>
            <slot name="content">
                内容。。。。。
            </slot>
        </div>
        <div class="lcj_btn">
            <button @click="qd">确定</button>
            <button @click="qx">取消</button>
        </div>
    </div>
</template>

js：

 methods: {
       //方法集合
        // 确定按钮  这里使用this.$emit派发事件让其调用的组件触发事件
        qd(){
            this.$emit("qd")
        },
         // 取消按钮  这里使用this.$emit派发事件让其调用的组件触发事件
        qx(){
            this.$emit("qx")
        }
    }