Vue组件通信

JAY.LIN 收录于未分类

2025-03-12 约 807 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146206695

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中相当于是引入了一个的标签

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、子组件—》传递数据到—》父组件

步骤流程

父组件 App.vue :
- 导入子组件 ：导入 Header 组件。
- 监听子组件事件 ：在模板中使用 @sendData="handleDataFromChild" 监听子组件触发的 sendData 事件。
- 定义事件处理方法 ：定义 handleDataFromChild 方法来处理从子组件接收到的数据，并将其存储在 childData 中。
- 显示数据 ：在模板中显示从子组件接收到的数据。
子组件 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>