Vue3学习笔记-- 组件化 - 插槽Slot(重点)/非父子通信

1 认识插槽Slot的作用

认识插槽Slot

开发中 会经常封装一个个可复用的组件:

我们会通过 props传递 给组件一些数据,让组件来进行展示

为了让这个组件具备更强的通用性,我们 不能将组件中的内容限制为固定的div span等这些元素

如 某种情况下 我们使用组件 希望组件显示的是一个按钮 某种情况下 希望是一张图片

我们应该让使用者可以决定某一块区域到底存放什么内容和元素

例子: 定制一个通用的导航组件 -NavBar

组件分为三块区域:左边 中间 右边 每块区域的内容都是不固定的

左边区域可能显示一个菜单图标 也可能显示一个返回按钮 可能什么都不显示

中间区域 可能显示一个搜索框 可能是一个列表,也可能是一个标题等

右边可能是一个文字 也可能是一个图标 也可能什么都没有

2 插槽Slot基本使用

如何使用插槽slot

可以先定义插槽slot:

插槽的使用过程其实是 抽取共性 预留不同;

我们会将 共同的元素 内容依然在组件内 进行封装

同时会将 不同的元素使用slot作为占位,让外部来决定到底显示什么样的元素;

如何使用slot?

Vue中将元素作为承载分发内容的出口;

在封装组件中 使用特殊的元素 就可以为封装组件 开启一个插槽;

该插槽插入什么内容取决于父组件 如何使用

插槽的默认内容

如果没有插入对应的内容 那么我们需要显示一个 默认的内容:

这个默认内容只会在没有提供插入的内容时 才会显示

App.vue代码

<template>
<!--  <div>App</div>-->
  <div class="app">
    <!--    1 内容是button-->
    <showMessage title="哈哈哈" content="我是内容">
      <!-- 动态拆入的内容-->
      <button>我是按钮元素</button>
    </showMessage>

    <!--    2 内容是超链接-->