vue3组件之间的传参

前端学习zzz

已于 2024-04-15 17:22:07 修改

阅读量484

点赞数 6

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

于 2024-04-15 17:21:59 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43151592/article/details/137786132

版权

vue3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue3中如何通过`defineProps`实现父组件向子组件传递属性，`defineEmits`用于子组件触发事件通知父组件，以及`provide`和`inject`的依赖注入机制，展示了父子组件间数据传递的不同方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、父传子 defineProps
父组件

<script setup>
  import { reactive } from 'vue';
  import Children from './children.vue';

  const parentProps = reactive({
    name:'zhangsan',
    age:20
  })

</script>

<template>
  <div>这是父组件</div>
  <div>子组件:
    <Children :parentname="parentProps.name" :parentage="parentProps.age"></Children>
  </div>
</template>

子组件

<script setup>
  const props = defineProps(['parentname','parentage'])
</script>

<template>
  <div>
    <div>姓名：{{parentProps.name}}</div>
    <div>年龄：{{parentProps.age}}</div>
  </div>
</template>

其中，我们也可以使用类型声明的方式，如果报错控制台会给出warn警告
在这里插入图片描述

const props = defineProps({
    parentname:{
        type:String, // 参数类型
        default:'Harry',//默认值
        required: true, //是否必传

    },
    parentage:{
        type:Number,
        default:18
    }
  })

在这里插入图片描述
2、子传父 defineEmits
子组件

<script setup>
  import { ref } from "vue"
  const childrenStr = ref('ceshi');

  const emit = defineEmits(['getStr'])

  const onsend = ()=>{
    emit('getStr', childrenStr)
  }
</script>

<template>
  <div>
    <button @click="onsend">点击将childrenStr传给父组件</button>
  </div>
</template>

父组件

<script setup>
  import { reactive, ref } from 'vue';
  import Children from './children.vue';

  const parentProps = reactive({
    name:'zhangsan',
    age:20
  })

  const str = ref('');

  const getStr = (childrenStr)=>{
    str.value = childrenStr
  }

</script>

<template>
  <div>这是父组件</div>
  <div>子组件:
    <Children :parentage="parentProps.age" @getStr="getStr"></Children>
  </div>
  <div>父组件接收子组件参数：{{str}}</div>
</template>

我们发现defineProps和defineEmits都没有像ref()需要引入，defineProps 和 defineEmits 都是只能在<script setup>中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
3、provide和inject依赖注入，可以实现父组件向所有子组件传递（多重父子组件之间的传参）

爷组件，引入provide

import { reactive, ref , provide} from 'vue';
const argument = ref('爷组件')
provide('grandfa',argument)

孙子组件，引入inject

<script setup>
	import {inject} from 'vue';
	const grandfa = inject("grandfa")
</script>
<template>
	<div>
	    {{grandfa}}
	 </div>
 </template>

这样并不用通过儿子传给孙子，可从孙子组件直接获取

后续还有遇到再补充~