Vue组件通信

Vue组件通信

Vue组件放在components目录：

1、组件是对于HTML标签的扩展

2、以.vue结尾的文件都是叫做组件

APP.vue叫做根组件

TODO: 组件的文件名字的首字母大写

组件的引入

import Xxx from './components/Xxx.vue'

App.vue:

规范写法：

建议写成：（通过 script setup 默认导入）只需导入过后就可以在template中调用了

在template中相当于是引入了一个的标签

Swiper.vue：

上述操作相当于是将Swiper.vue 的相关内容通过导入，封装为一个新的标签供App.vue进行调用

---

组件传值

---

1、父组件—》传递数据到—》子组件

父组件中：

<子组件名称 :变量=父组件将要传递的数据>

Header.vue

2、子组件—》传递数据到—》父组件

步骤流程

1. 父组件 App.vue:

   • 导入子组件：导入 Header 组件。
   • 监听子组件事件：在模板中使用 @sendData="handleDataFromChild" 监听子组件触发的 sendData 事件。
   • 定义事件处理方法：定义 handleDataFromChild 方法来处理从子组件接收到的数据，并将其存储在 childData 中。
   • 显示数据：在模板中显示从子组件接收到的数据。

2. 子组件 Header.vue:

   • 定义事件：使用 defineEmits 定义一个名为 sendData 的事件。
   • 触发事件：在按钮点击事件中，使用 emit('sendData', dataToSend) 发送数据给父组件

App.vue:

Header.vue: