vue3组件通信（记录所有遇到的通信方式，以后看到新的方式会追加）

发飙的狗头人

已于 2024-04-25 01:47:29 修改

阅读量332

点赞数 5

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2024-04-25 01:47:03 首次发布

本文链接：https://blog.csdn.net/weixin_50961467/article/details/138143005

版权

vue3 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、父传子

1、props

2、ref

3、provide-inject（传子组件及后代组件）

一、父传子

1、props

// --------------------------------------------------------父组件
<template>
  <div>父组件</div>
  <ChildPage :car="che" :money="qian"></ChildPage>
</template>

<script setup lang="ts">
import ChildPage from '@/components/ChildPage.vue'
import { ref } from 'vue'

let che = ref('奔驰')
let qian = ref(100000)
</script>



// ---------------------------------------------------------子组件
<template>
  <div>子组件</div>
  <div>子组件收到父组件的车：{{ props.car }}</div>
  <div>子组件收到父组件的钱：{{ props.money }}块</div>
</template>

<script setup lang="ts">
//defineProps是Vue3提供方法,不需要引入直接使用

// 数组写法
// let props = defineProps(['car', 'money'])

// 对象写法，可以规定数据类型和默认值等
let props = defineProps({
  car: {
    type: String,
    required: true //是否规定必须得有
  },
  money: {
    type: Number,
    required: false, //是否规定必须得有
    default: 9999 //默认数据，当父组件没有传递数据时，读取该数据
  }
})
</script>

<style lang="scss" scoped></style>

2、ref

// --------------------------------------------父组件
<template>
  <div>父组件</div>
  <ChildPage ref="son"></ChildPage>
  <button @click="add">给子组件10块钱</button>
  <button @click="shengyu">给子组件留100块钱</button>
</template>

<script setup lang="ts">
import ChildPage from '@/components/ChildPage.vue'
import { ref } from 'vue'

let son = ref()

const add = () => {
  // 父组件调用子组件函数传值
  son.value.addMoney(10)
}

const shengyu = () => {
  // 父组件直接修改子组件变量的值
  son.value.money = 100
}
</script>



// --------------------------------------------子组件
<template>
  <div class="son">
    <h3>我是子组件：{{ money }}</h3>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//儿子钱数
let money = ref(666)
const addMoney = (num: number) => {
  money.value += num
}
//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
  money,
  addMoney
})
</script>

3、provide-inject（传子组件及后代组件）

父组件：用provide传输对应的数据，并提供一个key，后续的子组件在拿数据也是根据此key

孙组件：数据可以进行修改，而且所有的组件数据都是同步的

// -----------------------------------------父组件
<template>
  <div>父组件</div>
  <div>{{ car }}</div>
  <ChildPage></ChildPage>
</template>

<script setup lang="ts">
import ChildPage from '@/components/ChildPage.vue'

//vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据
import { ref, provide } from 'vue'
let car = ref<string>('法拉利')
//祖先组件给后代组件提供数据
//两个参数:第一个参数就是提供的数据key
//第二个参数:祖先组件提供数据
provide('TOKEN', car)
</script>


// ------------------------------------------子组件
<template>
  <div class="child">
    <h1>我是子组件1{{ car }}</h1>
    <Child></Child>
  </div>
</template>

<script setup lang="ts">
import Child from './GrandChild.vue'
import { inject } from 'vue'
//注入祖先组件提供数据
//需要参数:即为祖先提供数据的key
let car = inject('TOKEN')
</script>

//-------------------------------------------孙组件
<template>
  <div class="child1">
    <h1>孙子组件</h1>
    <p>{{ car }}</p>
    <button @click="updateCar">更新数据</button>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'
//注入祖先组件提供数据
//需要参数:即为祖先提供数据的key
let car = inject('TOKEN')
const updateCar = () => {
  car.value = '自行车'
}
</script>