【前端学习指南】第三站 Vue 组件之间通信

🍭 Hello，我是爱吃糖的范同学 

        🔴 想把自己学习技术的经历和一些总结分享给大家！

        🔴 通过这样的方式记录自己成长，同时沉淀自己的技术，我会把所有额外的时间和经历投放到优快云和公众号（💥公号名：AIRC Team💥，欢迎关注，为大家准备了很多有关编程学习资料）文章的撰写。

        🔴 希望能通过这样的方式让大家认识我，和我一起学习编程，共同进步！😃

        希望能和大家一起进步和成长！坚持热爱！🎉🎉🎉

---

目录

📌 Vue 组件 通信 概述：

📌 Vue 组件 父子 通信：

1.父组件 数据传递到 子组件：

2.子组件 数据传递到 父组件：

📌 Vue 组件 通信 Props：

1.Props 属性定义：

2.Props 属性校验：

2.1 类型校验：

2.2 属性复杂校验：

3.Props 和 Data 对比，单向数据流：

📌 Vue 组件 通信 v-model：

📌 Vue 组件 通信 $attrs：

📌 Vue 组件 通信 refs、parent：

📌 Vue 组件 通信 provide、inject：

📌 Vue3 组件通信方式：

📌 往期文章

📌 今日一言

---

📌 Vue 组件 通信 概述：

        组件通信是指组件与组件之间的数据传递。组件之间的数据是独立的，无法直接访问其他组件的数据。如果想使用其他组件的数据，就需要使用组件之间的通信方式，来把当前组件的数据传递给其他组件。

        首先需要明确的是组件之间的关系：

        首先明确组件之间的关系大致分为两类：父子关系 和 没有关系（世界上只有两种人：一种是人是义父，一种人不是义父 😏😏😏）

        父子关系是指是组件之间是否存在包含关系，即一个组件中引入其他组件，当前组件是父组件，其他引入的组件是子组件。

         针对这两种不同类型的关系，Vue 提出了不同的通信解决方案。

---

📌 Vue 组件 父子 通信：

• 父组件通过 props 将数据传递给子组件
• 子组件利用 $emit 通知父组件修改更新

1.父组件 数据传递到 子组件：

        父组件通过在子组件使用标签中添加属性的方式将数据传递给子组件。子组件的 props 属性接收父组件传递过来的数据。

        关于 Props 属性传递后面会单独进行解析，他除了可以实现从父组件向子组件传递数据外，还可以通过传递方法把数据从子组件传递给父组件。

2.子组件 数据传递到 父组件：

        【自定义事件】自定义事件常用于：子 => 父

区分原生事件和自定义事件：

• 原生事件：
  • 事件名是特定的（click、mosueenter等等）
  • 事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
• 自定义事件：
  • 事件名是任意名称
  • 事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！
  • 命名方式尽量不要驼峰式，而是采取keybab-case式，即 send-toy

        首先，需要在父组件中提供一个接收子组件通知的监听函数。然后在子组件的属性中注册这个监听函数。子组件通过 $emit 触发通知事件，父组件监听到子组件的通知事件后，获取到子组件传递的数据，进行后续处理。 

<!--在父组件中，给子组件绑定自定义事件：-->
<Child @send-toy="toy = $event"/>

<!--注意区分原生事件与自定义事件中的$event-->
<button @click="toy = $event">测试</button>

//子组件中，触发事件：
this.$emit('send-toy', 具体数据)

---

📌 Vue 组件 通信 Props：

1.Props 属性定义：

        概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。

• 若 父传子：属性值是非函数。
• 若 子传父：属性值是函数。

<template>
  <div class="father">
    <h3>父组件，</h3>
		<h4>我的车：{
  { car }}</h4>