Vue封装dialog组件基础

 1.父组件中注册组件  @reValue为自定义接收子组件的返回值

<template>
  <div id="app">
    {{ message }}
    <com :msg="array" ref="compo" @reValue="fatherClick($event)">
      <template>
        插槽
      </template>
    </com>
  </div>
</template>
<script>
import com from "../views/components";
export default {
  components: {
    com: com
  },
  mounted() {
    console.log(this.$refs.compo);
  },
  data() {
    return {
      message: "父组件",
      array: [1, 2, 3, 4]
    };
  },
  methods: {
    fatherClick(event) {
      console.log(event);
    }
  }
};
</script>
<style lang="less" scoped></style>

2.子组件进行一些操作返回给父组件

 

<template>
  <div class="slot_class">
    {{ message }}
    <div v-for="(item, index) in msg" :key="index">{{ item }}</div>
    <slot ></slot>
    <button :data-click="ok" @click="click($event)">確定</button>
    <button :data-click="cancel" @click="click($event)">取消</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: Array
  },
  data() {
    return {
      message: "子组件",
      ok: "OK",
      cancel: "Cancel"
    };
  },
  methods: {
    click(e) {
      const clickType = e.target.getAttribute("data-click");
      console.log(clickType);
      const type = {
        clickType: clickType,
        clickMessage: this.message
      };
      this.$emit("reValue", type);
    },
    Val() {
      this.$emit("reValue", true);
    }
  }
};
</script>
<style lang="less" scoped>
.slot_class {
  display: flex;
  flex-direction: column;
}
</style>

通过$emit将想要返回的属性返回到父组件中，再在父组件中进行一些逻辑操作