提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 一、组件通信：父子组件通信（父传子）
- 二、组件通信：父子组件通信（子传父）
- 三、组件通信：父子组件通信（Provide/Inject）
- 四、组件通信：非连接的组件通信（全局事件总线mitt库）
- 五、插槽Slot的基本使用（测试数据的作用域）：
- 六、具名插槽Slot的基本使用：
- 七、渲染作用域（作用域插槽的背景）
- 八、作用域插槽（父组件没法直接用子组件的数据，有渲染作用域）
- 九、动态组件
- 十、动态组件传参
- 十一、webpack代码（组件）分包
- 十二、异步组件：Vue的代码分包（实际开发用的不多，用路由懒加载比较多）
- 十三、异步组件和Suspense：
- 十四、组件的ref和$refs
- 十五、组件的v-model
一、组件通信：父子组件通信（父传子）
1.基本使用
- 父组件文件：data定义数据 + 动态绑定数据 :title=“title”
- 子组件文件：定义props接收数据（类型，是否必传，默认值（数据/对象需要用函数），自定义验证函数）
2.非Prop的Attribute
- 当我们传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为 非Prop的 Attribute
- 常见的包括class、style、id属性等；
- 当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中
- 如果我们不希望组件的根元素继承attribute，可以在组件中设置 inheritAttrs: false：
- 禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素
- 我们可以通过 $attrs来访问所有的 非props的attribute；
二、组件通信：父子组件通信（子传父）
1.基本使用：
- 子组件文件：监听事件@click + 事件中发出emit + 定义emits属性（vue3）
- 父组件文件：子组件监听发出的事件 + 定义事件方法
三、组件通信：父子组件通信（Provide/Inject）
1.基本使用：
- 父组件文件：定义
provide属性（函数） - 子组件文件：定义
inject属性（数组）
四、组件通信：非连接的组件通信（全局事件总线mitt库）
1.基本使用：
- 安装：
npm install mitt - 封装：一个工具
eventbus.js（导入 + 调用 + 导出） - 使用：
- A组件文件：导入
eventbus.js工具 + 发出事件emitter.emit(''why'',{可以携 带参数}) - B组件文件：在生命周期函数中，监听事件总线
emitter.on
- A组件文件：导入
五、插槽Slot的基本使用（测试数据的作用域）：
1.基本使用：组件的内容全部替换到插槽中
2.数据的作用域：父组件的数据也可以显示到子组件中
六、具名插槽Slot的基本使用：
1.基本使用：
- 子组件：
<slot name="left"></slot> - 父组件：
<template v-slot:left> <button>左边的按钮</button> </template>， - 可以简写：
<template #left> <button>左边的按钮</button> </template>
2.默认插槽名：
- 一个不带 name 的slot，会带有隐含的名字 default
3.动态插槽名：
- 目前我们使用的插槽名称都是固定的，比如 v-slot:left等等，我们可以通过
v-slot:[dynamicSlotName]方式动态绑定一个名称
七、渲染作用域（作用域插槽的背景）
1.渲染作用域：
- 父级模板里的所有内容都是在父级作用域中编译的
- 子模板里的所有内容都是在子作用域中编译的
八、作用域插槽（父组件没法直接用子组件的数据，有渲染作用域）
1.作用：父组件可以访问子组件的数据，并按照父组件期望的形式进行数据展示（子组件定义插槽）
2.简单理解：作用域插槽就是子组件用$emit向父组件传递数据的另一种表现
- 父组件访问子组件的数据：
- 父组件获取组件slot属性：
v-slot="slotProps"， - 子组件将数据绑定到动态属性中：
<slot :item="item"></slot>
- 父组件获取组件slot属性：
- 按照父组件期望的形式进行数据展示：
- 子组件中定义slot插槽：
<slot :item="item" :index="index"></slot> - 父组件通过插槽的方式替换子组件的插槽内容
- 子组件中定义slot插槽：
九、动态组件
1.概念：动态组件是使用 component 组件，通过一个特殊的attribute is 来实现
2.基本用法：
3.is绑定的值是什么内容？
- 可以是通过
component函数注册的组件 - 在一个组件对象的
components对象中注册的组件（局部组件）
十、动态组件传参
1.动态组件传参跟普通组件一样
区别：当前动态组件的 is 绑定哪个组件，参数就在哪个组件上
十一、webpack代码（组件）分包
1.默认的打包过程
- 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组 件模块打包到一起（比如一个app.js文件中）
- 这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢
2.代码的分包
- 所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js
- 这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容
十二、异步组件：Vue的代码分包（实际开发用的不多，用路由懒加载比较多）
1.背景
- 如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），那 么Vue中给我们提供了一个函数：
defineAsyncComponent。
2.defineAsyncComponent接受两种类型的参数：
- 类型一：工厂函数，该工厂函数需要返回一个Promise对象；
- 类型二：接受一个对象类型，对异步函数进行配置；
十三、异步组件和Suspense：
1.注意：目前Suspense显示的是一个实验性的特性，API随时可能会修改。
2.Suspense是一个内置的全局组件，该组件有两个插槽：
- default：如果default可以显示，那么显示default的内容；
- fallback：如果default无法显示，那么会显示fallback插槽的内容；
十四、组件的ref和$refs
1.使用场景：
- 某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例，这个时候，我们可以给元素或者组件绑定一个ref的attribute属性
- 组件实例有一个
$refs属性，它一个对象Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例。
十五、组件的v-model
1.原生input标签的v-model
- v-model默认帮助我们完成了两件事：
v-bind:value的数据绑定和@input的事件监听
2.组件的v-model
- v-model默认帮助我们完成了两件事：
v-bind:modelValue的数据绑定和@update:model-value的事件监听
3.代码案例
<hy-input v-model="message"></hy-input><hy-input :modelValue="message" @update:model-value="message = $event"></hy-input>
4.子组件input标签中:vlaue和@input简写方式
5.组件中绑定两个v-model
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/84969.html
