vue 组件通信的几种方法

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>