Vue3关于组件通信、动态组件、组件的ref和$refs、webpack分包、组件中v-modal使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、组件通信：父子组件通信（父传子）

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）
• 父组件文件：子组件监听发出的事件 + 定义事件方法
  

2.注意

（1）父组件接收事件参数方式：
可以写成：@add="addOne"，或者@add="addOne($event)"----------------->都可以正常接收emit的参数。
不可写成：@add="addOne()",或者@add="addOne(payload)"----------------->都无法正常接收emit的参数。
（2）Vue事件绑定加括号和不加括号的区别
@click=“fun”：不带括号、不写实参的fun默认传event (事件对象)
@click=“fun(value)”：只要加括号，无论是否传值，都属于传实参(value)给函数，event (事件对象)就接收不到。
@click=“fun($event, value)”：如果需要实参、又需要event (事件对象)，就需要手动传入 event (事件对象)

<template>
	<div @click="fun">点击</div>
	<div @click="fun1(value)">点击</div>
	<div @click="fun2($event, value)">点击</div>
</template>

<script>
export default {
	data () {
	  return {
		value:'实参数据'
	  }
	},
	methods:{
		fun($event){
			console.log($event,'--这是事件对象')
		},
		fun1(value){
			console.log(value,'--实参数据')
		},
		fun2($event, value){
			console.log($event, value,'--事件对象，实参数据')
		}
	}
	
}
</script>

三、组件通信：父子组件通信（Provide/Inject）

1.基本使用：

• 父组件文件：定义provide属性（函数）
• 子组件文件：定义inject属性（数组）
  

四、组件通信：非连接的组件通信（全局事件总线mitt库）

1.基本使用：

• 安装：npm install mitt
• 封装：一个工具eventbus.js（导入 + 调用 + 导出）
• 使用：
  • A组件文件：导入eventbus.js工具 + 发出事件emitter.emit(''why'',{可以携 带参数})
  • B组件文件：在生命周期函数中，监听事件总线emitter.on
    

九、动态组件

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

十六、单项数据流props如何可以在子组件修改的解决方案

1.子组件

原来的事件发出

this.$emit('title', newTitle)

改为：'update:事件名称'

this.$emit('update:title', newTitle)

2.父组件

<text-document :title.sync="doc"></text-document>

关于：'update:事件名称'，也可以在一般的情况下使用

<text-document @update:title="handle"></text-document>