前端-组件通信

目录

一.什么是组件通信

二.组件之间的关系 和 组件通信方案分类

        1.组件关系分类

三.父子通信

        父→子

        什么是prop

        prop的校验：

        prop&data、单向数据流

        子→父

四.非父子通信

        1.event bus事件总线   

        2.provide&inject

---

一.什么是组件通信

        组件通信，就是指组件与组件之间的数据传递

                但是每个组件的数据是独立的，一个组件无法之间访问另一个组件的数据。

                如果想使用其它组件的数据→就要用到组件通信组件通信

二.组件之间的关系 和 组件通信方案分类

        1.组件关系分类

                父子关系

                非父子关系

三.父子通信

        将A组件导入并注册到B组件中，那么B组件就是A组件的父组件，A组件就是B组件的子组件

        父→子

        什么是prop

                定义：组件上注册一些自定义属性

                作用：向组件传递数据

                特点：可以传递任意数量的prop

                           可以传递任意类型的prop

        prop的校验：

                作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示→帮助开发者，快速发现错误。

                语法：类型校验        非空校验        默认值        自定义校验

        prop&data、单向数据流

                共同点：都可以给组件提供数据

                区别：

                        data的数据是自己的→随便改

                        prop的数据是外部的→不可以随便更改，要遵循单向数据流

        子→父

四.非父子通信

        1.event bus事件总线   

        首先创建一个专门的文件夹，用于存放事件总线：

        创建事件总线：

        2.provide&inject

<script lang="ts">
import {defineComponent} from 'vue'
import Father from '@/components/Father.vue'export default defineComponent({name: "GrandfatherComponent",components: {Father},data() {return {key: '我是Grendfather的孙子'}},provide() {return {key: this.key,}}
})
</script><template><div>我是爷爷组件<Father></Father></div>
</template><style scoped lang="less"></style>

<script lang="ts">
import {defineComponent} from 'vue'
import Son from '@/components/Son.vue'export default defineComponent({name: "FatherComponent",components: {Son}
})
</script><template><div>我是父亲组件<Son></Son></div>
</template><style scoped lang="less"></style>

<script lang="ts">
import {defineComponent} from 'vue'export default defineComponent({name: "SonComponent",inject: ['key',]
})
</script><template><div><div>我是儿子组件</div><div>{{ key }}</div></div></template><style scoped lang="less"></style>

        当传统的是不同类型的值，响应程度会有不同

类型	是否响应式	说明
原始类型（String, Number, Boolean 等）	❌ 否	子组件拿到的是值的拷贝，数据变化不会同步
引用类型（Object, Array, Function）	✅ 是	子组件拿到的是同一个引用对象，数据变化会同步