vue结合slot来做通用组件

在实际开发中，我们可能有十几个弹框，就显示人的详情，物的详情，事的详情等等，这个时候我们就想把这些通用的封装成组件，需要的时候只有传组件名字进去就可以了
如同，我现在demo文件夹有三个vue文件

这篇文章讲如何自动添加自定义组件vue中自动添加自定义组件
先把这个文件夹里面的文件自动注册到vue中

在父组件中

<component :is="'demo'" :options="options"></component>
vue 2.0 中
options = {
    name: "open",
 }
 
vue3.0中
import { defineComponent, reactive } from "vue";
setup() {
    const options = reactive({
      name: "open",
    });
    return {
      options,
    };
  },

demo.vue组件

<template>
  <div>
    <h2>demo-----</h2>
    <component :is="options.name ? options.name : 'test'"></component>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
  }
});
</script>

test组件

<template>
  <div>
    <h2>这是个test-----</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
});
</script>

open组件

<template>
  <div>
    <h2>这是个open-----</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
});
</script>

结果显示的是demo中open的组件

这样我们就可以在使用的时候只要改变options中name的值就可以找到对于的组件，传入相同的值就行

同时我们也可以做二次扩张，使用插槽来二次定义子组件中的事件
效果如下，可以自定义组件中的样式

父组件中

<component :is="'demo'" :options="options">
    <template v-slot:options="{data}">
    <div><button @click="getData(data)">点击事件</button></div>
   </template>
 </component>
vue2.0写法
methods:{
	getData (obj) => {
      console.log("obj-----", obj);
    };
}
vue3.0写法
setup() {
    const getData = (obj: string) => {
      console.log("obj-----", obj);
    };
    return {
      getData,
    };
  },

demo组件

<template>
  <div>
    <h2>demo-----</h2>
    <component :is="options.name ? options.name : 'test'">
    //这边使用了组件中在嵌套组件
      <template v-slot:options="{data}">
          <slot name="options" :data="data"></slot>
      </template>
    </component>
  </div>
</template>

open组件

<template>
  <div>
    <h2>这是个open-----</h2>
    // 将子组件里面的值返回到父组件中
    <slot name="options" :data="'open'"></slot>
  </div>
</template>

test组件

<template>
  <div>
    <h2>这是个test-----</h2>
     // 将子组件里面的值返回到父组件中
    <slot name="options" :data="'test'"></slot>
  </div>
</template>