component 和slot -----vue3

news2025/1/11 21:49:25

前言:
辗转几个公司发现基本上有点规模的公司都会有自己的平台,无论是开发平台还是其他什么,都脱离不了一个功能点,那就是组件;无论你是自己从0到1建立的平台还是基于别的已有的平台,都是这样;无非是组件的套娃,只要你梳理清楚平台的主要枝干,熟悉一些前端基本知识,然后掌握组件使用,加一些js逻辑,基本上都可以很快熟悉并上手他们的业务(当牛马)。

组件必备

1. component

component
一个用于渲染动态组件或元素的“元组件”。

作为动态组件是必不可少的,这里以vue3的setup 单文件组件为例(组合式api)
创建一个vue3工程之后,你需要随意写个页面作为组件来测试
在这里插入图片描述
然后在你需要用组件的地方引入这个组件并且使用component 来使用它

要渲染的实际组件由 is prop 决定。
当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名。
或者，is 也可以直接绑定到组件的定义。

这里的component的is需要用:组件实例,如图所示,测试了多个不用的方式给:is 赋值发现reactive 返回的对象代理直接给他赋值是不能展示的,可以使用ref()或者shallowRef() 返回的变量值。

(注意:这里用ref的话，vue给出警告Vue接收到一个组件，该组件被制成反应对象。这可能会导致不必要的性能开销，应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。如果使用
markRaw 那么currentComp将不永远不会再成为响应式对象。所以得使用 shallowRef)

或者直接不用变量,直接:is= ‘testDay01’ 也可以展示,这里只展示怎么使用详情请查看reactive;
注意:
reactive 返回的一个代理对象proxy ,更改原始对象不会触发更新,但是值依然会被改变,更改proxy 可以正常触发更新,并且原始对象也会更新。

2.slot

子组件中的提供给父组件使用的一个占位符
父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。它允许你在父组件中插入子组件的内容，从而实现更大的灵活性和可复用性。
他可以说是贯穿了整个vue3项目，无论是自己写组件还是用成熟的组件库都脱离不了它，例如：在这里插入图片描述
这其中的# ***=“scope” 的写法其实也是 slot 为default的实际运用，
下面简单介绍下用法：

基本用法

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <p>This is content from the parent.</p>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot> <!-- This will render content from the parent -->
  </div>
</template>

命名插槽

你可以使用命名插槽来插入特定位置的内容：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>This is the header</h1>
    </template>
    <template v-slot:footer>
      <p>This is the footer</p>
    </template>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- Default slot -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

作用域插槽

作用域插槽允许子组件传递数据到插槽中：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.message }}</p>
    </template>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script setup>
const message = 'Hello from child';
</script>