vue3-setup语法糖之组件传参（defineProps、defineEmits、defineExpose、provide、inject）

Jocelyn_书

已于 2025-01-23 15:36:30 修改

阅读量1.2w

点赞数 8

CC 4.0 BY-SA版权

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

于 2023-01-18 15:29:54 首次发布

本文链接：https://blog.csdn.net/weixin_42307283/article/details/128716120

VUE3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue3中使用defineProps和defineEmits进行父传子和子传父通信的方式。在<scriptsetup>语法下，这两个宏用于声明组件的props和emits，简化了数据传递的过程。同时，文章提到了defineExpose宏用于在组件中暴露特定的属性和方法，以便于父组件访问。

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

vue3官方文档

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。

父传子 - defineProps

父组件

<template>
    <div class="Father">
        <p>我是父组件</p>
        <!--  -->
        <son :ftext="ftext"></son>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')

    
</script>

子组件

<template>
    <div class="Son">
        <p>我是子组件</p>
       <!-- 展示来自父组件的值 -->
       <p>接收到的值：{
  {ftext}}</p>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
// setup 语法糖写法

//defineProps 来接收组件的传值
const props = defineProps({
    ftext: {
        type:String
    },
})

    
</script>

组件名格式

都使用 PascalCase 作为组件名的注册格式（每个字母开头大写）

<ComponentA></ComponentA>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

传递 prop 的细节

Prop 名字格式：如果一个 prop 的名字很长，应使用 camelCase 形式（即驼峰命名法）

在子组件里的defineProps使用 camelCase 形式（即驼峰命名法）

//子组件里使用
defineProps({
  greetingMessage: String
})

<span>{
  { greetingMessage }}</span>

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 内模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式（即单词连接命名法 greeting-message）：

在父组件里引用子组件且传递参数时使用 kebab-case 形式

//父组件
<MyComponent greeting-message="hello" />

子传父 - defineEmits

子组件：

<template>
    <div class="Son">
        <p>我是子组件</p>
        <button @click="toValue">点击给父组件传值</button>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
// setup 语法糖写法
//用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法'])
const emit = defineEmits(['exposeData'])

const stext = ref('我是子组件的值-ftext')
const toValue = ()=>{
    emit('exposeData',stext)
}
    
</script>

父组件：

<template>
    <div class="Father">
        <p>我是父组件</p>
        <!--  -->
        <son @exposeData="getData" :ftext="ftext"></son>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
import Son from './son.vue'
const ftext = ref('我是父组件-text')
const getData = (val)=>{
    console.log("接收子组件的值",val)
}
</script>

参考文档：<script setup> | Vue.js

Props | Vue.js 组件事件 | Vue.js

defineExpose

官方解释：

使用 <script setup> 的组件是默认关闭的(即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定)。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性

子组件：

<template>
    <div>
        <p>我是子组件</p>
    </div>
</template>
    
<script setup>
import { ref } from 'vue';

    const stext = ref('我是子组件的值')
    const sfunction = ()=>{
        console.log("我是子组件的方法")
    }
    defineExpose({
        stext,
        sfunction
    })
</script>

父组件：

<template>
	<div class="todo-container">
		<p>我是父组件</p>
		<son ref="sonDom"></son>
		<button @click="getSonDom">点击</button>
	</div>
</template>

<script setup>
import { ref ,nextTick} from 'vue';
	import son from './components/son.vue'
	const sonDom = ref(null) //注意这里的命名要和ref上面的命名一致
	const getSonDom = ()=>{
		console.log("sonDom",sonDom.value)
	}

	//直接打印sonDom的值是拿不到的，子组件节点还没生成
	nextTick(()=>{
		console.log("sonDom",sonDom.value)
	})
	
	
</script>

参考文档： <script setup> | Vue.js

上面所说的都是常规的父子组件（一级嵌套），如果出现多层的嵌套，那么使用props传参很麻烦。