Vue3 组件和插槽

Vue3 组件和插槽

组件基础

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

根组件

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

简单使用

定义组件

在src/components目录下，定义 Content.vue、Hello.vue 2个组件：

Hello.vue组件

Content.vue组件

父组件可以嵌套子组件。

使用组件

父子访问

父组件访问子组件

子组件访问父组件

在开发中尽量少用$parent。

访问根组件

插槽

使用插槽

只能使用单个插槽。

• 元素是一个插槽出口。表示父元素的插槽内容在哪里渲染。

定义插槽组件：MySlot.vue

使用插槽

具名插槽

可以定义和使用多个插槽。

• 在元素中定义name属性，用于给插槽分配唯一的id。

定义具名插槽组件：MyMultiSlot.vue

使用具名插槽

默认值插槽

在外部没有提供任何内容情况下，可以指定默认内容。

• 在元素内提供默认内容。

定义默认值插槽组件

使用默认值插槽

作用域插槽

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

• 插槽提供数据。
• 父组件接收数据。

定义作用域插槽组件：MyListSlot.vue

使用作用域插槽

需要使用v-slot指令接收props对象。