【vue3】父子组件传值，子组件暴露事件给父组件

String佳佳

已于 2023-10-16 17:02:27 修改

阅读量2.4k

点赞数 3

分类专栏： vue3 文章标签： javascript typescript 前端

于 2023-10-16 12:03:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44171757/article/details/133854074

版权

vue3 专栏收录该内容

18 篇文章

订阅专栏

文章介绍了Vue中父组件向子组件传递数据的`defineProps`，子组件向父组件发送事件的`defineEmits`，以及子组件暴露方法和数据的`defineExpose`。详细展示了如何在组件间进行有效的双向通信。

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

一、父传子

defineProps


//父组件
<template>
    <div>父级</div>
    <span>========================================</span>
    <Com :title="'小星星'"></Com>
</template>

//子组件
<template>
    <div>子组件</div>
    <p>这是父级传递的参数---{{ title }}</p>
</template>

<script setup lang='ts'>
	//接收父组件传递过来的值defineProps，是一个接收props的宏函数
	
	/**js*/
    const props = defineProps({
        title:{
            type:String,
            default:'默认值'
        }
    })
    console.log(props.title)

	/**ts*/
    const props = defineProps<{
        title:string
    }>()
    console.log(props.title)
	
	 /**ts特有的,withDefaults，可以定义默认值 
     * 只能接收defineProps<{...}>()
     */
    withDefaults(defineProps<{
        title:string,
        arr:number []
    }>(),{
        title:'默认值2',
        arr:()=>[]
    })

</script>

二、子传父

defineEmits


//子组件
<button @click="send">给父组件传值</button>

<script setup lang='ts'>

	//js
    const emit = defineEmits(['childClick','childClick2])

	//ts
    const emit = defineEmits<{
        (e:'childClick',name:string,arr:number[]):void,
        (e:'childClick2',name:string,arr:number[]):void,
    }>()
   
    const send = ()=>{
        emit('childClick','yyx',[1,2,3])
    }
</script>

//父组件
<template>
    <div>父级</div>
    <span>========================================</span>
    <Com @child-click="getChildData"></Com>
</template>

三、子组件暴露出方法或数据

defineExpose
在父组件调用时，不能直接在setup中使用，需要在声明周期函数中调用，或者事件中调用


//子组件
<script setup lang='ts'>
    const chilfFun = ()=>{
        console.log('我是子组件里面的一个方法')
    }
    defineExpose({
        name:'child游芸霞',
        chilfFun
    })
</script>

//父组件
<template>
    <div>父级</div>
    <button @click="getFun">点击调用子组件参数和方法</button><br>
    <span>========================================</span>
    <Com ref="comRef" ></Com>
</template>

<script setup lang='ts'>
    import { ref, } from 'vue'
    import Com from '../components/Com.vue'
    
    //const comRef = ref()
    const comRef = ref<InstanceType<typeof Com>>()
    const getFun = ()=>{
        console.log(99999,comRef.value?.name)
        comRef.value?.chilfFun()
    }
</script>