vue是js一个非常热门的框架，组件之间的通信是vue基础也是重要的一部分。
1.props, 可以实现父子组件通信，但其数据是只读，不可修改 （使用child之前需先接受一下，已下同理）
javascript
//父组件
<script setup lang='ts'>、
import {ref} from "vue"
let money = ref(1000)
</script>
<template>
<div class="container">
<child info="我是父亲" :money="money"></child>
</div>
</template>
<style lang="scss" scoped>
</style>\
javascript
<script setup lang='ts'>
definedProps({
info,
money,
})
</script>
<template>
<div class="container">
<p>{{ info }}</p>
<p>{{ money }}</p>
</div>
</template>
<style lang="scss" scoped>
</style>\2.emit 用于子组件给父组件传递数据
javascript
//父组件
<script setup lang='ts'>
const a = (value)=>{
console.log(value) //23
}
</script>
<template>
<div class="container">
<child @xxx = "a"></child>
</div>
</template>
<style lang="scss" scoped>
</style>\
javascript
<script setup lang='ts'>
let $emit = defineEmits(['xxx'])
const abc = ()=>{
$emit("xxx",23) //第一个为传递得方法，第二个为传递的参数，可以是已定义的变量
}
</script>
<template>
<div class="container">
<button @click="abc()">点我呀~</button>
</div>
</template>
<style lang="scss" scoped>
</style>\3.useAttrs
会返回一个代理对象
实现效果与props差不多，都可以用来获取·父组件传递过来的数据，但props优先级更高，被props拿了之后，useAttrs就拿不到了
使用案例：
javascript
//父组件
<script setup lang='ts'>
</script>
<template>
<div class="container">
<child type="primary" size="small"> </child>
</div>
</template>
<style lang="scss" scoped>
</style>\
javascript
<script setup lang='ts'>
import {useAttrs} from "vue"
let attrs = useAttrs();
</script>
<template>
<div class="container">
<button :=attrs></button> // ":"相当于v-bind
</div>
</template>
<style lang="scss" scoped>
</style>\4.ref 与 $parent
1.ref：可以获取真实的DOM节点,可以获取子组件实例VC
2.$parent: 可以在子组件的内部获取到父组件的实例
使用案例：
javascript
//父组件
<script setup lang='ts'>
import { ref,onMounted } from 'vue';
import Child from './index.vue';
const money = ref(1000);
const son = ref(); //**** 此两处的名字必须相同
onMounted(()=>{
console.log(son.value)
})
console.log(son.value)
defineExpose({
money //暴露出去，是的能被接收到
})
</script>
<template>
<div class="container">
<p>father: {{ money }}</p>
</div>
<hr>
<Child ref="son" /> //****
</template>
javascript
//子组件
<script setup lang='ts'>
import { ref } from 'vue';
const money = ref(445)
const add = () => {
money.value++
}
const gerFather = (parent: any) => {
console.log(parent)
}
defineExpose({
money, //暴露出去
add
})
</script>
<template>
<div class="container">
<p>son :{{ money }}</p>
<button @click="add()">增加</button>
<button @click="gerFather($parent)">getFather</button>//***标记
</div>
</template>5.pinia
以pinia 储存库作为媒介，以获取和操作pinia中的数据进行组件通信
javascript
//此为组合式的写法
import {defineStore} from "pinia"
import {ref} from "vue"
export const store = defineStore("name",()=>{
let value = ref(0)
return{
value
}
})
javascript
<script setup lang="ts">
let a = store();
console.log(a.value) //0
</script>
<template>
<routerView></routerView>
</template>
<style>
</style>6.provide 与 inject
跨组件通信，能实现祖孙之间的通信
javascript
//祖先组件
<script setup lang="ts">
let money = ref(100)
provide('key',money) //第二个参数可以是函数
</script>
<template>
<routerView></routerView>
</template>
<style>
</style>
javascript
//孙组件
<script setup lang="ts">
let money = injdect('key'); //通过"key" 来获取
console.log(money.value)// 100 通过inject拿到的数据可在孙组件中进行修改
</script>
<template>
<routerView></routerView>
</template>
<style>
</style>