Vue组件通信

Vue组件放在components目录：

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

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

APP.vue叫做根组件

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

组件的引入

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

App.vue:

<script>
import Swiper1 from './components/Swiper.vue'
export default{components:{Swiper222:Swiper1}
}
</script>
<template><div><Swiper222></Swiper222></div>
</template>

规范写法：

<script>
import Swiper from './components/Swiper.vue'export default {components: {Swiper // 使用一致的命名（可以省略冒号后面的）}
}
</script><template><div><Swiper></Swiper> </div>
</template>

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

<script setup>
import Swiper from './components/Swiper.vue'</script><template><div><Swiper></Swiper> </div>
</template>

在template中相当于是引入了一个<Swiper222></Swiper222>的标签

Swiper.vue：

<template><div>这个是一个swiper组件</div>
</template>

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

---

组件传值

---

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

父组件中：

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

<template>
<!-- 父组件传值给子组件 -->
<!-- 在父组件中调用 子组件的属性名进行绑定数据 -->
<Header :fatherList="List"></Header>
</template><script setup>
import Header from './components/Header.vue';
const List =[1,2,3,4,5,6,7,8,9,10]</script>

Header.vue

<template><div>这是一个header组件<div v-for="(item,index) in fatherList" :key="index">{{item}}</div></div>
</template><script setup>
// 子组件接收父组件传过来的数据
const props = defineProps({fatherList:{type:Array,default:[]}
})</script>

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

步骤流程

1. 父组件 App.vue:

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

2. 子组件 Header.vue:

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

App.vue:

<template><div><Header @sendData="handleDataFromChild"></Header><p>Data from child: {{ childData }}</p></div>
</template><script setup>
import Header from './components/Header.vue';
import { ref } from 'vue';const childData = ref('');const handleDataFromChild = (data) => {childData.value = data;
};
</script>

Header.vue:

<template><div><button @click="sendDataToParent">Send Data to Parent</button></div></template><script setup>import { defineEmits } from 'vue';const emit = defineEmits(['sendData']);const sendDataToParent = () => {const dataToSend = 'Data from Header component';emit('sendData', dataToSend);};</script>