vue的动态组件及插槽详情

1、 什么是动态组件

动态组件是指：在一个挂载点使用多个组件，并进行动态切换。可能对于新手来说，这句话有些难理解，什么是挂载点?可以简单的理解为页面的一个位置。
最常见的就是：tab的切换功能。

在vue要实现这个功能通常用两种方式。一是使用<component>元素的?is?的特性，二是使用?v-if?

方式一：

<template>
  <div class="hello">
    <h3>使用component 的 is特性</h3>
    <ul>
      <li 
      v-for="(item,index) in tabList" 
      :key="index" 
      style="cursor:pointer" 
      @click="changeView(index)">
      {{item}}</li>
    </ul>
    <component :is="currentView"></component>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
    currentView() {
      return this.arr[this.index];
    }
  },
  methods: {
    changeView(index) {
      this.index = index;
    }
  },
};
</script>

?方式二

<template>
  <div class="hello">
    <h3>使用v-if实现</h3>
    <ul>
      <li v-for="(item,index) in tabList" :key="index" style="cursor:pointer" @click="change(index)">{{item}}</li>
    </ul>
    <div>
        <shuma v-if="index===0"></shuma>
        <shouji v-else-if="index===1"></shouji>
        <pc v-else></pc>
    </div>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      keppIndex:0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
  },
  methods: {
    change(index) {
      this.index = index;
    }
  },
};
</script>

二、插槽(组件是自定义的)

1. 好处：组件的内容结构可定制 用slot插槽进行占位

2. 语法：

子组件中通过slot进行占位

父组件，在子组件标签嵌套的内容就会被渲染到slot地方

3.具体写法

子组件 <slot>默认内容</slot>

父组件 <子组件标签><div></div></子组件标签>

?4、 具名插槽

理解：如果插槽有多个,App.vue中的标签都会给所有带插槽的，要想对应，用具名插槽

子组件：

<slot name="header">默认内容</slot>

<slot name="main">默认内容</slot>

<slot name="footer">默认内容</slot>

父组件：

<base-layout>
<template #header>v-slot==#header
  <div>头部</div>
</template>
<template v-slot:main>
   <div>主体</div>
</template>
<template #footer>
  <div>尾部</div>
</template>
</base-layout>