vue3中的组件通信

最新推荐文章于 2024-08-30 16:09:08 发布

A_bad_boy_hahaha

最新推荐文章于 2024-08-30 16:09:08 发布

阅读量363

点赞数

分类专栏： vue3 +vite笔记文章标签： js vue3 vite

本文链接：https://blog.csdn.net/a_bad_boy_hahaha/article/details/119732478

版权

vue3 +vite笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue3中父子组件间的通信方式，包括使用`props`和`emit`进行数据传递，以及在深度组件通信中如何利用`provide`和`inject`进行跨级数据传递。示例代码展示了如何在不同组件间有效地管理数据流动，以实现更灵活的组件交互。同时，文章还提到了在使用`provide`和`inject`时需要注意的响应式数据传递问题。

摘要由CSDN通过智能技术生成

本篇的组件通信不涉及vuex

1、父子组件通信`props&emit`

vue3中的defineProps和defineEmits不用引入，可以直接使用

父组件

<template>
	<Son tip="fatherData" @clickFather = handleClick></Son>
</template>
<script setup>
	// 导入子组件
	import Son from './son.vue'
	// 接收子组件事件传递来的数据
	const handleClick = (data) => {
	  console.log(data);
	}
<script>

子组件

<template>
    <el-tag type="success">{{tip}}</el-tag>
    <el-button type='primary' @click="clickSon">子组件</el-button>
</template>
<script setup>
	// 接收父组件传来的数据
	defineProps({
	  tip:String
	})
	const emit = defineEmits(['clickFather'])
	const clickSon = () => {
	  emit('clickFather', '子组件传过来的数据')
	}
<script>

2、跨级通信`provide&inject`

当组件的深度比较大的时候，用父子之间的通信需要层层传递，不优雅。

演示需要依旧使用父子组件，三级组件可以自己试试

// 父组件
<template>
	<Son tip="fatherData" @clickFather = handleClick></Son>
</template>
<script setup>
	// 导入reactive，provide
	import { reactive, provide } from 'vue'
	// 导入子组件
	import Son from './son.vue'
	// 接收子组件事件传递来的数据
	const handleClick = (data) => {
	  console.log(data);
	}
	// 传递静态数据
	provide('geolocation', {
	  longitude: 90,
	  latitude: 135
	})
	// 传递响应式数据，注意这里的provide一定要写在响应式数据的后面
	const state = reactive({ count: 0 })
	provide( 'count',state)
	
	// 这样会报错
	// provide( 'count',state)
	// const state = reactive({ count: 0 })

<script>

子组件

<template>
    <el-tag type="success">{{tip}}</el-tag>
    <el-tag type="success" @click="handle">{{inject2.count}}</el-tag>
    <el-button type='primary' @click="clickSon">子组件</el-button>
</template>
<script setup>
	import { inject } from 'vue'
	// 接收父组件传来的数据
	defineProps({
	  tip:String
	})
	const inject1 = inject('geolocation')
	console.log(inject1);
	const inject2 = inject('count')
	const handle = () => {
	  inject2.count++
	}
<script>