目录
组件之间的传值，分为3种方式
一.父传子，父组件向子组件传值
1.建立一个默认的vue3程序，运行起来如图所示
2.此例子其实就是一个默认的父传子组件
父组件就是App.vue
子组件就是HelloWorld.vue
在父组件App.vue中引用了HelloWorld子组件，只需要把子组件中的msg变量绑定一个a的变量即可
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
let a = '父传子的值'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld :msg="a" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.在子组件中，把不需要的代码删除
<template>
<h1>{
{ msg }}</h1>
</template>
<script setup>
defineProps({
msg: String
})
</script>
<style scoped>
</style>
4.运行效果，可以看到父组件中的值，已经显示到了子组件中。
补充另一种，其实就是provide和inject，还使用上面的项目的结构
传值。App.vue是父
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import {
provide
} from 'vue'
provide("msg", "给子孙的数据") //向下传递数据
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接收值。HelloWorld.vue是子
<script setup>
import {
inject
} from 'vue'
const msg = inject("msg")
console.log(msg)
</script>
<template>
<h1>{
{ msg }}</h1>
</template>
<style scoped>
a {
color: #42b983;
}
</style>
效果
二.子传父，子组件向父组件传值
1.先在子组件中写一个点击事件，再定义emit，emit的第一个参数是父组件的方法，第二参数就是需要传递的值。
<template>
<button @click="send">点击向父组件传值</button>
</template>
<script setup>
const emit = defineEmits(['aa'])
const send = () => {
emit("aa", "点击向父组件传值");
}
</script>
<style scoped>
</style>
2.在父组件中，接收方法aa，然后再定义bb，最后输出data的值，就是传递的值
3.运行效果，点击子组件的值，可以在父组件中看到输出的值。
三.兄弟组件之间互传，2个组件之间是平级关系，互相传值
在vue3之前，可以使用事件总线，但是vue3中，官方已经把事件总线删除了，所以就不能使用了。
其实兄弟组件也可以转化成子传父，然后父传子，2个组件都去寻找同一个父组件，然后进行传值，不过这样太麻烦了，没有必要。
vue3中使用pinia更加的简单方便，不管你什么子组件，父组件，都可以互相传值，各个组件之间都可以互相传值，没有任何限制。参考链接如下，包括上面的父传子，子传父的问题，都可以使用pinia，所以强烈推荐使用。