62.[前端开发-Vue3]Day04-jsconfig-Vue版本-组件间通信-插槽

组件化 – 组件间通信

1 Vue组件的嵌套关系

认识组件的嵌套

路径的配置

组件的拆分

组件的通信

2 父组件传递子组件

父子组件之间通信的方式

父组件传递给子组件

showInfo.vue

<template><div class="infos"><h2 :class="$attrs.class">姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>身高: {{ height }}</h2><h2>Message: {{ showMessage }}</h2></div><div class="others" v-bind="$attrs"></div>
</template><script>export default {// inheritAttrs: false,// 作用: 接收父组件传递过来的属性// 1.props数组语法// 弊端: 1> 不能对类型进行验证 2.没有默认值的// props: ["name", "age", "height"]// 2.props对象语法(必须掌握)props: {name: {type: String,default: "我是默认name"},age: {type: Number,required: true,default: 0},height: {type: Number,default: 2},// 重要的原则: 对象类型写默认值时, 需要编写default的函数, 函数返回默认值friend: {type: Object,default() {return { name: "james" }}},hobbies: {type: Array,default: () => ["篮球", "rap", "唱跳"]},showMessage: {type: String,default: "我是showMessage"}}}
</script><style scoped>
</style>

Props的数组用法

Props的对象用法

细节一：那么type的类型都可以是哪些呢？

细节二：对象类型的其他写法

细节三：Prop 的大小写命名

3 非props的attribute

非Prop的Attribute

禁用Attribute继承和多根节点

4 子组件传递父组件

子组件传递给父组件

自定义事件的流程

自定义事件的参数和验证（了解）

5 组件通信案例练习

 组件间通信案例练习

\

Vue组件化 - 插槽Slot/非父子通信

1 认识插槽Slot作用

认识插槽Slot

如何使用插槽slot？

插槽的默认内容

多个插槽的效果

2 插槽Slot基本使用

插槽的基本使用

3 具名插槽Slot使用

具名插槽的使用

动态插槽名

具名插槽使用的时候缩写

渲染作用域

渲染作用域案例

4 作用域插槽Slot使用

认识作用域插槽

作用域插槽的案例

独占默认插槽的缩写

默认插槽和具名插槽混合

非父子组件的通信

5 全局事件总线使用

全局事件总线mitt库

使用事件总线工具

Mitt的事件取消

6 依赖注入Provide/Inject

Provide和Inject

Provide和Inject基本使用

Provide和Inject函数的写法

处理响应式数据