vue动态组件与插槽

2021-04-14 本文已影响0人 beizi

什么是动态组件

动态组件指的是动态切换组件的显示与隐藏

实现动态组件渲染

vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染

<template>
  <div>
    <!-- 点击按钮，动态切换组件 -->
    <button @click="comName = 'first'">1</button>
    <button @click="comName = 'second'">2</button>
    <button @click="comName = 'third'">3</button>

    <!-- 添加动态组件的容器 -->
    <!-- is的值就是组件的名称，组件名称就是你引入组件时设置的key -->
    <!-- keep-alive:保持动态组件的状态 -->
    <keep-alive> <component :is="comName"></component></keep-alive>
  </div>
</template>

插槽

什么是插槽

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽
可以把插槽认为是组件封装期间，为用户预留的内容的占位符

匿名插槽

在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符
如果在定义slot的时候，没有为插槽指定name属性，则这个slot就是匿名插槽

    <!-- 添加匿名插槽：没有为插槽设置name属性，它相当于一个内容站位 -->
    <slot></slot>

    <sister>
      <!-- 在组件中，为插槽自定义内容 -->
      <p>--用户自定义内容--</p>
    </sister>

具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的 name 名称
这种带有具体名称的插槽叫做“具名插槽”。

<template>
  <div class="myheader">
    <div>
      <!-- 添加具名插槽 ，名为left -->
      <slot name="left"></slot>
    </div>
    <div>
      <!-- 添加具名插槽 ，名为center -->
      <slot name="center"></slot>
    </div>
    <div>
      <!-- 添加具名插槽 ，名为right -->
      <slot name="right"></slot>
    </div>
  </div>
</template>

ps:没有指定 name 名称的插槽，会有隐含的名称叫做 “default”

类组件中使用插槽

    <myheader>
      <!-- 指定插槽的语法：v-slot：插槽名称 -->
      <template v-slot:left>
        <span>返回</span>
      </template>
      <!-- 简写：(v-slot:) 替换为字符 # -->
      <template #center>
        <span>编辑用户信息</span>
      </template>
    </myheader>