vue是js一个非常热门的框架，组件之间的通信是vue基础也是重要的一部分。

1.props,  可以实现父子组件通信，但其数据是只读，不可修改 （使用child之前需先接受一下，已下同理）

//父组件
<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>\

<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 用于子组件给父组件传递数据

//父组件
<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>\

<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就拿不到了

使用案例：

//父组件
<script setup lang='ts'></script><template><div class="container"><child type="primary" size="small"> </child></div>
</template><style lang="scss" scoped></style>\

<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: 可以在子组件的内部获取到父组件的实例

使用案例：

//父组件
<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>

//子组件
<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中的数据进行组件通信

//此为组合式的写法
import {defineStore} from "pinia"
import {ref} from  "vue"
export const store = defineStore("name",()=>{let value = ref(0)return{value}
})

<script setup lang="ts">
let a = store();
console.log(a.value) //0
</script><template><routerView></routerView></template>
<style></style>

6.provide 与 inject

        跨组件通信，能实现祖孙之间的通信

//祖先组件
<script setup lang="ts">
let money = ref(100)
provide('key',money) //第二个参数可以是函数
</script><template><routerView></routerView></template>
<style></style>

//孙组件
<script setup lang="ts">let money = injdect('key'); //通过"key" 来获取
console.log(money.value)// 100 通过inject拿到的数据可在孙组件中进行修改
</script><template><routerView></routerView></template>
<style></style>