vue组件与插槽的基本使用

1、动态组件

多个组件使用同一个挂载点，并动态切换，这就是动态组件。
内置component组件, 配合is属性, 设置要显示的组件名字

<template>
  <div>
  //点击不同的按钮显示不同的组件，通过改变组件名来实现
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>

      <p>下面显示注册组件-动态切换:</p>
      <div style="border: 1px solid red;">
          <component :is="comName"></component>
      </div>
  </div>
</template>

<script>
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
    data(){
        return {
            comName: "UserName"
        }
    },
    components: {
        UserName,
        UserInfo
    }
}
</script>

2、组件缓存

组件切换会导致组件被频繁销毁和重新创建, 性能不高
使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁
keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

<div style="border: 1px solid red;">
    <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

3、组件插槽

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽：通过 slot 标签（是在子组件中）, 可以接收到写在组件标签内的内容

v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#
总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

插槽的使用
1.在组件内先用slot标签占位
2.使用组件时，传入具体标签插入

关于界面的显示注意：
1、如果子组件没有放slot标签，父组件中*中*不会显示在界面中；
2、如果子组件有放slot标签且有默认内容，**中有内容，则会显示组件和**；没有内容，则显示组件的同时，加载默认内容的默认内容。

//Pannel.vue - 留下具名slot
<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     <slot name="content"></slot>//注意看这里，父组件使用时，的内容放在这里显示***************************************
    </div>
  </div>
</template>

//UseSlot.vue使用组件的位置
<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <template v-slot:title>//等同于