vue组件：keep-alive组件和插槽

第一部分：keep-alive组件

一.动态组件（component标签）

语法：.<component :is="变量"></component>

注意：:is="组件注册后的标签名字符串或data变量"

• 不能直接拿注册标签名赋值使用

需求：tab栏切换：
component标签的原理：在父组件中对子组件创建销毁
<template>
 <div>
  我是父组件App.vue
  <!--子组件名 <Myone /><Mytow /><Mythree /> -->
  <component :is="comName"></component>
  //点击button按钮改变变量comName的值完成tab栏切换
  <button @click="comName = 'Myone'">点我切换页面Mytow</button>
  <button @click="comName = 'Mytow'">点我切换页面Mytow</button>
  <button @click="comName = 'Mythree'">点我切换页面Mythree</button>
 </div>
</template>
<script>
import Myone from "./compoents/Myone.vue";
import Mytow from "./compoents/Mytow.vue";
import Mythree from "./compoents/Mythree.vue";
export default {
  // 声明变量
  data() {
    return { comName: "Myone" };
  },
  components: {
    Myone,
    Mytow,
    Mythree,
  },
};
</script>

created创建组件生命周期钩子和destroyed销毁组件生命周期钩子

注意：只有使用了component标签的子组件才能使用这两货

<script>
export default {
  // 生命周期created创建组件
  // 生命周期destroyed销毁组件
  // 只有使用了component标签的子组件才能使用这两货
  created() {
    console.log("我是Mythree生命周期created创建组件");
  },
  destroyed() {
    console.log("我是Mythree生命周期destroyed销毁组件");
  },
};
</script>

二.keep-alive在component标签中的应用

 <keep-alive ></keep-alive>标签解决缓存

语法 ：

     1. include="组件名1,组件名2..."

     2. :include="['组件名1'， '组件名2']"

<template>
 <div>
  我是父组件App.vue
  <!-- 
   <keep-alive ></keep-alive>标签解决缓存
  语法 ：1. include="组件名1,组件名2..."
       2. :include="['组件名1'， '组件名2']"
  -->
 <!-- 
     在动态的include标签中写了名字的子组件，在tab栏切换中不会销毁，
     而是会出现失去活力状态deactivated (隐藏)和激活状态activated (显示) 
  -->
   <keep-alive :include="['Myone', 'Mytow', 'Mythree']">
   <component :is="comName"></component>
   </keep-alive>
   component :is="comName"></component>
   <button @click="comName = 'Myone'">点我切换页面Mytow</button>
   <button @click="comName = 'Mytow'">点我切换页面Mytow</button>
   <button @click="comName = 'Mythree'">点我切换页面Mythree</button>
  </div>
</template>
<script>
import Myone from "./compoents/Myone.vue";
import Mytow from "./compoents/Mytow.vue";
import Mythree from "./compoents/Mythree.vue";
export default {
  // 声明变量
  data() {
    return { comName: "Myone" };
  },
  components: {
    //组件注册
    Myone,
    Mytow,
    Mythree,
  },
};
</script>

activated激活生命周期函数和deactivated失去活力生命周期钩子

<script>
export default {
  // 生命周期created创建组件
  // 生命周期destroyed销毁组件
  // 只有使用了component标签的子组件才能使用这两货
  created() {
    console.log("我是Mythree生命周期created创建组件");
  },
  destroyed() {
    console.log("我是Mythree生命周期destroyed销毁组件");
  },
  // deactivated失去活力
  // deactivated激活
  // 只有使用了<keep-alive>标签的子组件才能使用这两货
  deactivated() {
    console.log("我是Mythree生命周期deactivated失去活力");
  },
  activated() {
    console.log("我是Mythree生命周期deactivated激活");
  },
};
</script>

第二部分：插槽

一.插槽基本使用

父组件中（插入）

父组件中
<template>
 <div>
  <p>我是父组件App.vue</p>
  <Mythree>
 <!--
   语法如下：
   template必须要起一个名字和子组件标签<slot name="one对应"> 这里的one随意起 
 -->
   <template v-slot:one> <h2>你好我是父组件插入进来的内容</h2></template>
 <!-- v-slot可以简写#one -->
  </Mythree>
 </div>
</template>
//以下部分可以不看
<script>
 import Mythree from "./compoents/Mythree.vue";
 export default {
  components: {
    Mythree,
  },
 };
 </script>

子组件（设置插入点）

子组件中
<template >
 <div>
   <p>我是Mythree</p>
   <!-- 当一个组件内有2处以上需要外部传入标签的地方 -->
   <!-- 
    子组件语法： <slot name="one">默认展示内容</slot>
    -->
   <slot name="one"></slot>
 </div>
</template>

二.作用域插槽（子传父：{数据}+结构）

 注意：子传父可以利用v-bind:a="变量"，传输变量到父组件