vue组件

动态组件

多个组件使用同一个挂载点,动态切换

步骤:
1.创建要被切换的组件
2.注册组件
3.声明变量--承载要显示的组件名
4. 设置挂载点<component :is="变量"></component>
5. 点击按钮-切换comName的值为要显示的组件名

<template>
  <div>
    <h1>动态组件使用</h1>
    <button @click="activeName = 'Form1'">表单1</button>
    <button @click="activeName = 'Form2'">表单2</button>
    <button @click="activeName = 'Form3'">表单3</button>
    <!-- 3. -->
    <!-- component 动态组件，is 指定什么组件名，就可以动态展示什么组件 -->
    <component :is="activeName"></component>
  </div>
</template>

<script>
// 1.导入组件
import Form1 from "@/components/Form1.vue";
import Form2 from "@/components/Form2.vue";
import Form3 from "@/components/Form3.vue";
export default {
  data() {
    return {
      // 变量 承载要显示的组件名 并给初始值Form2
      activeName: "Form2",
    };
  },
  // 2.注册组件
  components: {
    // Form1: Form1,
    // Form2: Form2,
    Form1,
    Form2,
    Form3,
  },
};
</script>
<style></style>

组件缓存

由于组件切换会导致组件被频繁销毁和重新创建, 性能不高

所以使用vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

实际开发:keep-alive 组件缓存，经常和 component 动态组件组合适用

<keep-alive>
<component :is="activeName"></component>
</keep-alive>

组件激活和非激活

两个钩子函数--activated--deactivated

# 被 keep-alive 包裹的组件才有的两个生命钩子函数

activated – 激活时触发

deactivated – 失去激活状态触发

组件插槽

#封装的组件里的数据不确定时,选择父传子,利用插槽来实现

# 1. 组件内用<slot></slot>占位
# 2. 使用组件时<child> </child>夹着的地方, 传入标签替换slot

父组件

<template>
  <div>
    <child>
      <h1>啦啦啦</h1>
      <p>我是父组件</p>
    </child>
  </div>
</template>
<script>
# 导入组件
import child from "./components/child.vue";
export default {
# 注册
  components: {
    child,
  },
};
</script>

子组件

<template>
  <div>
#      坑位
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

插槽--默认内容

如果不给插槽slot传东西, 就在slot中书写默认显示内容,会显示slot标签中的内容

<slot>默认内容</slot>
# 父组件没有传东西时,slot中的默认内容就会显示出来

具名插槽

# 多个插槽,把数据传入对应坑位 
# 使用v-slot:槽名  简写  #
# 要传入子组件slot的内容(父组件),用template标签包起来

父组件

<template>
  <div>
    <Son>
    # 简写  #
      <template #title>
        <h3>你好儿子</h3>
      </template>
      <template v-slot:content>
        <a href="#">链接</a>
      </template>
    </Son>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  components: { Son },
};
</script>

子组件

<template>
  <div class="box">
    <slot name="title">
      <h2>我是子组件标题</h2>
    </slot>
#    <!-- 坑位 -->
    <slot name="content">
      <section>子组件默认内容</section>
    </slot>
  </div>
</template>

<script>
export default {};
</script>

作用域插槽

父组件

<template>
  <div>
#        作用域插槽的使用
#          1、子组件，<slot :属性名="值"></slot> 传值
#          2、父组件，通过 v-slot="变量名" 接收  
#        PS：作用域插槽相当于是插槽的子传父。
    <Pannle>
      <!-- 父组件接收：v-slot="变量名"  -->
      <template v-slot="scope">
        <h2>{{ scope }}</h2>
        <h3>{{ scope.row.defaultTwo }}</h3>
      </template>
    </Pannle>
  </div>
</template>
<script>
import Pannle from './components/Pannle.vue'
export default {
  components: {
    Pannle,
  },
}
</script>

子组件

<template>
  <div class="box">
    <!-- 作用域插槽可以看做：子传父 -->
    <slot :row="defaultObj"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultObj: {
        defaultOne: '无名氏',
        defaultTwo: '小传同学',
      },
    }
  },
}
</script>