vue 组件通信的几种方法

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>
相关推荐
逐·風34 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询