目录
1. 父子组件传值
1.1 父组件给子组件传值 —— v-bind
1.2 子组件接收父组件的传值 —— defineProps
1.3 设置子组件接受参数的默认值 —— withDefaults
1.4 子组件给父组件传参（派发事件） —— defineEmits
1.5 子组件暴露给父组件内部属性 —— defineExpose
2. 插槽
2.1 什么是插槽
2.2 匿名插槽、具名插槽
2.3 作用域插槽
2.4 动态插槽
3. 提供/注入
3.1 提供/注入是什么
3.2 父组件暴露（提供）数据
3.2.1 provide 基本用法
3.2.2 provide 源码解析
3.3 子组件接收（注入）数据
3.3.1 inject 基本用法
3.3.2 inject 源码解析
4. 兄弟组件传值
4.1 EventBus 原理
4.1.1 使用 ts 实现一个简单的 EventBus
4.1.2 使用 4.1.1 的 EventBus
4.2 Mitt
4.2.1 安装 mitt
4.2.2 新建 mitt-bus.ts
4.2.3 使用 mitt 发送事件
4.2.4 使用 mitt 接收事件
4.2.5 在全局实例上使用 mitt
传递字符串类型，不需要加 v-bind（:）
传递非字符串类型，需要加 v-bind（:）
讯享网
如果是在 setup 语法糖中使用 defineProps，则无需引入，直接使用即可
使用了 ts：defineProps<type>();
未使用 ts：defineProps({});
讯享网
withDefaults 接受两个参数：
- defineProps<Props>()
- 一个对象（里面包含了所有默认值）
注意：
- 仅当使用 ts 时，才可以使用 withDefaults
- 设置默认值时，如果是引用类型，则要使用 () => {}、() => [] 的形式设置
defineEmits 接受一个数组，用于存储 事件名 数组
defineEmits 返回一个函数，也就是传说中的 emit
子组件定义派发事件：
讯享网
父组件接受/监听子组件派发的事件：
在父组件中，获取子组件的 DOM
讯享网
打印之后，发现没有任何属性
父组件若想读取子组件内部的属性，需要在子组件内 把需要的属性 通过 defineExpose 暴露出去
这样做的目的：让父组件不能随意通过 DOM 修改子组件内的属性，父组件只能读取到子组件主动暴露出来的属性
子组件提供给父组件使用的占位符，用 <slot></slot> 表示
父组件可以使用任意代码填充 templete，填充的内容会替换子组件中的 <slot></slot>
具名插槽：有 name，父组件通过 #name 获取
匿名插槽：没有 name，父组件通过 #default 获取
讯享网
子组件：给 slot 标签，动态绑定参数，派发给父组件使用
父组件：在 template 中使用解构赋值 #default="{ data, index }"，获取子组件中的值
插槽可以是变量名
如果是 header，则填充到头部；如果是 footer，则填充到底部
讯享网
provide：在祖先组件中，指定要暴露（提供）出去的属性
inject：在孙子组件中，指定要接收（注入）的属性
3.2.1 provide 基本用法
provide 接收两个值
- key
- value：string、number、symbol
其中，value 默认是可以被子组件修改的，为了防止被修改，可以添加 readonly 属性
3.2.2 provide 源码解析
provide 只能在 setup 语法糖中使用，不能在 options 中使用
使用 原型链 的方式，实现 provide（举个栗子：var a = {name: 1}; var b = Object.create(a); 打印b 什么都没有，但是打印 b.name 可以打印出1）
讯享网
补充：vue3 中可以使用 v-bind 绑定 setup 中的变量
3.3.1 inject 基本用法
inject 可以设置默认值（注意设置成响应式的）
inject 可以修改父组件中的 provide 值，注意响应式
3.3.2 inject 源码解析
查询父组件的 provides，如果读的到，则返回父组件的 provides
如果读不到（实例在根目录），则返回 appContext 的 provides
讯享网
简而言之，兄弟组件通信 有两种方式：
- 使用父组件充当桥梁，实现兄弟组件传参
- 使用 EventBus（JavaScript 发布订阅）
4.1.1 使用 ts 实现一个简单的 EventBus
4.1.2 使用 4.1.1 的 EventBus
在 A 组件中，使用 emit 发出事件
在 B 组件中，使用 on 监听事件
讯享网
4.2.1 安装 mitt
npm install –save mitt
4.2.2 新建 mitt-bus.ts
4.2.3 使用 mitt 发送事件
讯享网
4.2.4 使用 mitt 接收事件
接收事件监听的页面，在卸载时，一定要记得调用 off 取消事件监听
4.2.5 在全局实例上使用 mitt
上面的 4.2.1-4.2.4 是单独使用 mitt，不是将 mitt 挂载到全局上，下面展示如何挂载到全局使用
修改 main.ts
讯享网
派发事件
添加事件监听
注意：如果是监听全部事件，那么会默认接收两个参数：事件名称、事件数据
最后会这么展示：
- 监听全部事件 === emitone 100
- 监听全部事件 === emittwo 200
讯享网
移除事件监听
清空所有事件监听
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/168115.html