Vue3学习和进阶

Vue的简介

一、什么是vue?

Vue是一款用于构建用户界面的javascript框架。它基于标准的HTML、CSS、JS进行构建，并且提供的一套声明式的，组件化的编程模型，进而帮助我们高效开发用户界面。无论是复杂还是简单的界面，我们都可以用vue进行胜任的。

基本的示例如下:

import { createApp, ref } from 'vue'createApp({setup() {return {count: ref(0)}}
}).mount('#app')

<div id="app"><button @click="count++">Count is: {{ count }}</button>
</div>

以上的示例可以完全给我们进行展示了Vue的两大核心的功能

声明响应式：Vue基于标准的HTML拓展的一套模板语法，使得我们可以声明式的描述最终输出的HTML和Javascript状态直接的关系
响应式：vue会进行自动的跟踪javascript状态并在其发生变化时响应式的更新DOM.

二、Vue的优势特点

1- 渐进式框架

vue是一个框架，也是一个生态。其功能已经覆盖了大部分前端的常见开发的需求了。为了考虑到web世界的多样化满足不同开发者的需求，这里vue同样的也设计的更加的灵活和“可以被逐步集成”这个特点。我们根据需求场景的不同可以用不同的方式使用Vue的

独立脚本（ Vue 可以以一个单独 JS 文件的形式使用，无需构建步骤！如果你的后端框架已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤，这是最简单的使用 Vue 的方式。在这些场景中你可以将 Vue 看作一个更加声明式的 jQuery 替代品）
作为 Web Component 嵌入（你可以用 Vue 来构建标准的 Web Component，这些 Web Component 可以嵌入到任何 HTML 页面中，无论它们是如何被渲染的。这个方式让你能够在不需要顾虑最终使用场景的情况下使用 Vue：因为生成的 Web Component 可以嵌入到旧应用、静态 HTML，甚至用其他框架构建的应用中。）
单页面应用 (SPA)（一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。构建这类应用的最佳方法是使用这样一种架构：Vue 不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application，缩写为 SPA)。）
Vue 提供了核心功能库和全面的工具链支持，为现代 SPA 提供了极佳的开发体验，覆盖以下方面：

（1）客户端路由
（2）极其快速的构建工具
（3）IDE 支持
（4）浏览器开发工具
（5）TypeScript 支持
（6）测试工具
全栈 / SSR （纯客户端的 SPA 在首屏加载和 SEO 方面有显著的问题，因为浏览器会收到一个巨大的 HTML 空页面，只有等到 JavaScript 加载完毕才会渲染出内容。）
JAMStack / SSG（如果所需的数据是静态的，那么服务端渲染可以提前完成。这意味着我们可以将整个应用预渲染为 HTML，并将其作为静态文件部署。这增强了站点的性能表现，也使部署变得更容易，因为我们无需根据请求动态地渲染页面。Vue 仍可通过激活在客户端提供交互。这一技术通常被称为静态站点生成 (SSG)，也被称为 JAMStack。）

2- 单文件组件

顾名思义单文件的组件会将一个组件的逻辑（JS），模板（HTML）和样式（CSS）封装在同一个的文件里面。
定义：在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script><template><button @click="count++">Count is: {{ count }}</button>
</template><style scoped>
button {font-weight: bold;
}
</style>

3- API 风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

（1）、选项式 API (Options API)
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

示例如下：

<script>
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count++}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(`The initial count is ${this.count}.`)}
}
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

（2）、组合式 API (Composition API)
组合式API我们可以通过导入API函数的方式来描述组件的逻辑。单文件的组件中，组合式的API通常是与

下面是使用了组合式 API 与

<script setup>
import { ref, onMounted } from 'vue'// 响应式状态
const count = ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value++
}// 生命周期钩子
onMounted(() => {console.log(`The initial count is ${count.value}.`)
})
</script><template><button @click="increment">Count is: {{ count }}</button>
</template>

两个的API具体的选择和使用？

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

二者比较具体使用：

选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API
当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。

Vue3的介绍和具体使用

一、基础知识

1- Vue3概述

Vue3是一个流行的JavaScript框架，用于构建用户界面。它是Vue.js框架的下一个主要版本，由Evan You领导的Vue.js团队开发

Vue3于2020年9月正式发布，相比于Vue2，Vue3在性能、响应式系统、TypeScript支持、Composition API等方面进行了大量改进和优化。

Vue3的响应式系统采用了ES6 Proxy对象，提高了响应式系统的性能和稳定性，并且允许更好的TypeScript支持。Composition API是一个新的API，它允许按逻辑组织代码，提高代码的可维护性和重用性。此外，Vue3还具有更好的Tree-shaking支持，提高了应用程序的性能。

总体而言，Vue3是一个优秀的框架，它在性能、开发体验和可维护性方面都有所提高，是开发现代Web应用程序的不错选择

2- Vue3的特性和优势

Vue3作为目前Vue.js框架的最新版本，有许多优势和特性的，具体包括如下：

更快的渲染速度和更小的包体积：Vue3通过优化虚拟DOM的实现和使用静态提升技术等方法，显著提高渲染速度和减小了包体积。
有更好的TS支持：Vue3中对TypeScript的支持更加友好，包括提供了更完整的类型定义和支持装饰器的语法
组合式API（Composition API）：Vue3里面引入了Composition API，提供了更灵活、更可重用和更易于测试的组件逻辑复用方式。
更好的响应式系统：Vue3的响应式通过proxy代理对象代替了Object.defineProperty实现，提高了性能并且可以更好的支持嵌套对象和数组。
更好的调试工具支持：Vue3提供了更好的调试工具的支持，包括可视化组件树和性能分析工具等。
更好的Three Shaking的支持：Vue3通过优化内部使用的依赖关系，更好的支持Tree Shaking,减小了包体积。

总的来说：Vue3给我们带来了更快，更灵活，更易于使用，更好的开发体验和更好的性能的。

3- Vue3的生命周期

Vue3的生命周期相比较Vue2来说进行了一些优化和调整，不过总得来说大同小异的。以下是Vue3的生命周期函数：

1，beforeCreate：实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用的。
2，created：实例已经创建完成后被调用。在这个阶段，模板已经编译完成了，但是还没有挂载到DOM上面。
3，beforeMount：在挂载开始之前被调用，即在render函数首次被调用之前。
4，mount：实例挂载完成之后被调用，这个时候DOM元素已经完全被渲染出来了。
5，beforeUpdate：数据更新时被调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子函数中进行更改数据。
6，update：数据更改导致虚拟DOM重新渲染和打补丁完成时候调用。
7，beforeUnmount：实例卸载之前调用，可以在这里做一些清理工作。
8，unmounted：实例卸载之后调用，这里没有 this，所以无法访问数据和方法。
9，errorCaptured：捕获子孙组件抛出的异常。被调用时，可以返回 false 以阻止该异常继续向上传播。

注意点：Vue3去掉了beforeDestroy和destroyed两个生命周期，取而代之的是beforeUnmount和unmounted。因为在Vue3中，所有的组件都被设计成了Teleport，即可以被迁移的，而不是被销毁的。因此，在组件卸载之前，会执行beforeUnmount，而在组件被卸载之后，会执行unmounted。

4- Vue3的模板语法

1，插值表达式
Vue3中的插值表达式使用双大括号{{}}，例如：{{ message }}。Vue3也支持在插值表达式中使用JavaScript表达式。

<template><div><h1>{{ title }}</h1><p>{{ message }}</p><p>{{ num1 + num2 }}</p></div>
</template><script>
export default {data() {return {title: 'Hello Vue 3!',message: 'This is a message',num1: 10,num2: 20}}
}
</script>

2，指令
Vue3中的指令使用v-前缀，例如：v-if、v-for、v-bind等。Vue3还引入了一些新的指令，如v-model的语法被改变，现在使用v-model:value和v-model:modifier来实现双向绑定和修饰符。此外，还有一些新的指令，如v-html、v-show、v-suspense等。

v-bind用于绑定HTML属性和组件props，可以简写为“:”

<template><div><img :src="imageUrl" alt="image"><my-component :prop1="data1" :prop2="data2"></my-component></div>
</template><script>
export default {data() {return {imageUrl: 'https://example.com/image.png',data1: 'prop1',data2: 'prop2'}}
}
</script>

v-on用于绑定事件处理函数，可以简写为“@”

<template><div><button @click="clickHandler">Click me</button></div>
</template><script>
export default {methods: {clickHandler() {console.log('button clicked');}}
}
</script>

v-if用于条件渲染，根据表达式的值决定是否渲染该元素

<template><div><p v-if="show">This is a paragraph</p></div>
</template><script>
export default {data() {return {show: true}}
}
</script>

v-for用于循环渲染，渲染数组中的每一个元素

<template><div><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul></div>
</template><script>
export default {data() {return {items: ['item1', 'item2', 'item3']}}
}
</script>

5，Vue3的计算属性和侦听器

计算属性是根据已有的属性值（响应式依赖）计算出一个新的值，相当于是一个带有缓存的方法，只要依赖的数据没有改变，计算属性就不会重新计算。

例如，我们可以使用计算属性来根据数据列表过滤出需要展示的数据

<template><div><input type="text" v-model="keyword" /><ul><li v-for="item in filteredList" :key="403 Forbidden">{{ item.title }}</li></ul></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const list = ref([{ id: 1, title: 'Apple' },{ id: 2, title: 'Banana' },{ id: 3, title: 'Orange' },{ id: 4, title: 'Pear' },]);const keyword = ref('');const filteredList = computed(() => {return list.value.filter((item) => {return item.title.toLowerCase().indexOf(keyword.value.toLowerCase()) !== -1;});});return {keyword,filteredList,};},
};
</script>

侦听器是用于监听数据变化并触发一些操作的方法，它可以监听到数据的变化并执行相应的操作。在 Vue3 中，我们可以使用 watch 函数来创建侦听器：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);});function increment() {count.value++;}return {count,increment,};},
};
</script>

上面的代码中，我们使用 watch 函数来监听 count 变量的变化，并在变化时打印出新旧值。当用户点击 “Increment” 按钮时，count 变量的值会增加，并触发 watch 函数。

6、Vue3的事件处理

在Vue3中，事件处理是通过在模板中使用@符号来绑定事件。例如，我们可以使用@click来绑定click事件，如下所示：

<template><button @click="handleClick">Click me!</button>
</template>

在上面的代码中，我们绑定了一个click事件到button元素，并指定了一个名为handleClick的方法来处理该事件。

与传统的事件绑定不同，Vue3的事件处理方法使用了一个特殊的修饰符语法。这些修饰符可以用来指定事件的一些行为，例如阻止事件冒泡或取消默认行为。以下是一些常用的事件修饰符：

.stop：阻止事件冒泡。
.prevent：取消事件的默认行为。
.capture：事件在捕获阶段被处理。
.self：只当事件发生在该元素本身而不是子元素时触发。
.once：事件只会触发一次。
.passive：告诉浏览器不需要等待事件处理函数完成就可以滚动页面。

下面是使用装饰费的示例：

<template><div @click.stop.prevent="handleClick">Click me!</div>
</template>

在上面的代码中，我们使用了.stop和.prevent修饰符来阻止事件冒泡和取消默认行为。

除了常规的DOM事件外，Vue3还提供了自定义事件。我们可以使用$emit方法来触发自定义事件，然后在父组件中使用v-on来监听这些事件。以下是一个使用自定义事件的示例：

<template><button @click="handleClick">Click me!</button>
</template><script>
export default {methods: {handleClick() {this.$emit('custom-event', 'Hello, world!');}}
};
</script>

在上面的代码中，我们定义了一个名为custom-event的自定义事件，并在点击事件中使用$emit方法触发该事件。在父组件中，我们可以使用v-on:custom-event来监听该事件。例如：

<template><my-component @custom-event="handleCustomEvent"></my-component>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {MyComponent},methods: {handleCustomEvent(message) {console.log(message); // 输出：Hello, world!}}
};
</script>

在上面的代码中，我们在父组件中使用@custom-event来监听自定义事件，并在handleCustomEvent方法中获取传递的参数。

二、组件化开发

1- Vue3的组件化开发

Vue3 是一个基于组件化开发的前端框架，因此组件化开发是 Vue3 的核心。Vue3 组件是由一组可复用的模板、样式和逻辑组成的，它可以被其他组件或者页面引用。

组件的核心是一个 Vue 实例，它可以使用 Vue 提供的选项进行配置，例如 data、methods、computed 等选项。一个 Vue 组件可以接受父组件传递的参数，也可以向父组件发送事件。

Vue3 提供了一个 defineComponent 函数来定义组件，这个函数接收一个配置对象作为参数，配置对象中包含了组件的各种选项。
下面是关于Vue组件的简单示例：

<template><div class="counter"><h1>{{ count }}</h1><button @click="increment">+1</button></div>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({name: 'Counter',setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment,};},
});
</script><style>
.counter {display: flex;flex-direction: column;align-items: center;
}
</style>

在这个组件里面，我们使用Vue3的defineComponent函数定义一个名为Counter的组件。组件中有一个count变量和一个increment方法，count变量的初始值是0，increment方法每次调用可以把count值加1。我们使用了插值表达式将 count 的值渲染到页面中，并使用 @click 指令绑定了 increment 方法。

这个示例展示了 Vue3 组件的基本结构，包括模板、脚本和样式。在 setup 函数中定义组件的状态和行为，然后将它们返回，让模板可以访问。

2- Vue的组件通信详解

Vue3中的组件通信可以使用props和事件两种方式来实现。

1，props通信如下：
props主要是父组件向子组件传递数据的方式。子组件通过props进行接手数据，这种数据流是单向的。即只能从父组件流向子组件的。
父组件中使用props向子组件进行传递数据：

Vue2里面的写法

<template><child-component :message="messageFromParent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {messageFromParent: 'Hello from parent'}}
}
</script>

在子组件中，我们通过props进行接收数据

<template><div>{{ message }}</div>
</template>
<script>
export default {props: {message: {type: String,default: ''}}
}
</script>

vue3里面的写法

<template><div>这里是父组件</div><input type="text" v-model="inputMsg"/><div>inputMsg:{{inputMsg}}</div><div>msg:{{msg}}</div><div><button @click="changeMsg">点击修改</button></div><div style="margin: 10px;">分割线-------------------------</div><childView:toMsg="msg":toFunc="func"
></childView></template><script setup>
import { reactive, ref } from 'vue';
import  childView  from './edit.vue'const inputMsg = ref('这里是父组件的消息')
const msg = ref('')const func = () =>{changeMsg()
}const changeMsg = () => {msg.value = inputMsg.value
}</script>

子组件

<template><div><div>这里是子组件</div><div>收到父组件消息toMsg：{{toMsg}}</div></div><div><button @click="toFunc">点击执行收到的父组件方法</button></div><div><button @click="changeMsg">点击修改toMsg</button></div></template><script setup>// 需要定义defineProps
const props = defineProps({toMsg: {type: String,default: 100,},toFunc: {type: Function,default: async () => {},}
})const changeMsg = () => {props.toMsg = "子组件修改"
}//或者直接接受，不设定类型与默认值
const props = defineProps(['toMsg '])
</script><style>
</style>

对于取值：setup中要通过props.msg取到，模板中直接msg取到

2，事件
事件是一种在子组件向父组件通信的方式。

vue2里面的写法

在子组件中定义事件：

<template><button @click="onClick">Click me</button>
</template>
<script>
export default {methods: {onClick() {this.$emit('button-clicked', 'Button clicked in child component');}}
}
</script>

在父组件中，通过v-on（缩写@）指令监听子组件触发的事件：

<template><child-component @button-clicked="onButtonClicked" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {onButtonClicked(message) {console.log(message);}}
}
</script>

这样，当子组件中的按钮被点击时，会触发button-clicked事件，父组件会调用onButtonClicked()方法，并接收子组件传递的数据。

vue3里面的写法
emit是最常见的用于子组件向父组件传递消息的方法。vue3使用使用defineEmits来声明emit，它接收内容与emit选项是一致的。

（1）用法一：给父组件发送自定义事件

// ----------子组件--------<button @click="btn">点击</button>
<script setup>
import {defineEmits} from 'vue'
const emit = defineEmits(['emit']) //数组里可以有多个自定义方法名
//或者使用ts约束自定义方法的参数
const emit = defineEmits<{(e:'getAge',age:number):void //设置自定义函数名称，参数类型与返回值类型// 可在此设置第二个自定义函数
}>()function btn() {emit('getAge',18)
}
</script>// ---------父级组件中--------// 在父级组件中，使用子级的自定义事件，在html中去写@自定义事件名称=事件名称(就是在子组件中emits的第一个参数)<HelloWorld @getAge="handleAge"/>
<script setup>
import HelloWorld from '@/components/HelloWorld'
// 函数中data是个形参，为子级传递过来的数据
const handleAge = function (data) {console.log(data)
}
</script>

（2）用法二：使用modelValue直接更新父组件数据

除了props和事件，Vue3中还提供了provide/inject、$refs等方式来实现组件通信。

//结构  
// 父组件：<CHild v-model:test="test"></CHild>//逻辑
let test =ref()// 子组件//逻辑
const props = defineProps({
test:'',
})
const emit = defineEmits(['update:test']);  //这个test就是接收的props
const resetTest =() =>{
//更新test给父组件
emit('update:test','最新数据')
}

这样父组件不需要自定义事件就能接受到最新的test数据。！

注意：不管使用props 或者emits 在vue3 里面都需要使用 defineProps 和 defineEmits 声明。

Vue2 里面父组件中调用子组件方法

方法1：通过$refs来进行调用。

// 子组件<template><div>我是子组件</div></template><script>export default {data() {return {name: 'jack'}},methods: {childrenFuc() {//在这里做某些子组件的操作。更菜子组件的值等等this.name = 'Tom'}}}</script>// 父组件<template><childBody ref="childRef"></childBody><button @click="handleClick">点击按钮</button></template><script>export default {data() {return {name: 'jack'}},methods: {handleClick() {//通过点击事件触发子组件的函数方法this.$refs.childRef.childrenFuc();}}}</script>

方法2：使用emit 和 emit和emit和on的方法

在子组件的mounted或者created定义需要触发的函数

// 子组件<template><div>我是子组件</div></template><script>export default {data() {return {name: 'jack'}},mounted() {//使用$nextTick方法，确保dom渲染完毕后加载该函数。this.$nextTick(function () {this.$on("childrenFuc", () => {//在这里做某些子组件的操作。更菜子组件的值等等this.name = 'Tom'})})}}</script>
// 父组件<template><childBody ref="childRef"></childBody><button @click="handleClick">点击按钮</button></template><script>export default {data() {return {}},methods: {handleClick() {//触发子组件的方法。this.$refs.childRef.$emit("childrenFuc");}},}</script>

vue3 里面父组件中调用子组件方法
1：通过ref直接调用子组件的方法 ref=“RefChild”；

2：在函数中写 RefChild.value.reset();， “reset”为子组件中定义的函数名。

3：子组件定义一个函数 reset()，使用defineExpose抛出，让父组件调用即可。

4：这个方法也可以进行传值，在括号中传入值，子组件接收即可。

父组件

<template><div class="vc-box"><el-button-group><el-button:type="tabletype === '1' ? 'primary' : ''"@click="selectTable('1')">按钮1</el-button><el-button:type="tabletype === '2' ? 'primary' : ''"@click="selectTable('2')">按钮2</el-button><el-button:type="tabletype === '3' ? 'primary' : ''"@click="selectTable('3')">按钮3</el-button></el-button-group><Childref="RefChild"@onselect="handleCriterionChange"v-if="tabletype === '测试'"></Child></div>
</template><script name="index" setup lang="ts">
import Child from '@/modular/analysis/components/child.vue';const tabletype = ref();// 获取子组件的引用
const RefChild = ref();const selectTable = i => {if (RefChild.value) {RefChild.value.reset();}
}const handleCriterionChange = (type: number) => {console.log('输出点击事件')
}</script>

子组件

<template><el-form :model="criterionForm"><el-form-item label="规范类别"><el-selectv-model="criterionForm.criterionType"class="m-2"style="width: 130px"placeholder="Select"size="default"@change="type => emits('onselect', type)"><el-optionv-for="item in criterionOptions":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-form>
</template>
<script setup lang="ts">
import { Ref } from 'vue';const emits = defineEmits<{ (e: 'onselect', value: number): void }>();const criterionForm: Ref<{ criterionType: number }> = ref({// 默认展示全部criterionType: 0
});const reset = () => {criterionForm.value.criterionType = 0;
};const criterionOptions = [{label: '全部',value: 0},{label: '合格',value: 1},{label: '不合格',value: 2}
];defineExpose({reset
});
</script>

Vue3里面也支持provide / inject（祖孙、父子组件）
Vue3里面兄弟组件目前使用mitt，vue到3.0之后好像取消了bus全局事件总线，选择使用mitt作为兄弟组件间通信和传参的方式。mitt的使用方法有两种：可以单独创建一个文件，哪里要用就引入它；也可以 main.js 中挂载全局属性；

3、Vue3的插槽

插槽是Vue3中用于在组件之间共享内容的一种机制。简单来说，它们允许我们将内容插入到组件的特定区域中。Vue3中的插槽分为两种类型：具名插槽和默认插槽。

Vue3中的插槽是一个强大的工具，可以帮助我们更好地管理组件之间的内容共享。通过使用插槽，我们可以更好地控制组件中的内容，使其更易于维护和扩展。如果您正在使用Vue3构建Web应用程序，插槽是一个不容错过的功能。

简单的实例如下：

<!-- 父组件 -->
<template><div><h1>{{ title }}</h1><slot></slot></div>
</template><script>
export default {name: 'MyComponent',props: {title: {type: String,required: true}}
}
</script>

在父组件中，我们定义了一个插槽，它表示该组件可以接收子组件传递过来的任何内容，并将其渲染在插槽所在的位置。

现在，我们可以在父组件标签内传入任何我们想要展示的内容，例如：

<!-- 使用父组件，并在其中传入一些内容 -->
<my-component title="这是标题"><p>这是一些内容</p><ul><li>列表项1</li><li>列表项2</li></ul>
</my-component>