vue3父子组件传参以及父组件调用子组件的属性或方法

最新推荐文章于 2025-06-25 16:23:36 发布

转载最新推荐文章于 2025-06-25 16:23:36 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/Mike_haohao/article/details/131467027

文章标签：

#vue.js #前端 #javascript

本文介绍了Vue中父子组件之间的数据传递，重点讲解了如何使用v-bind、defineProps、props类型声明（包括TS中的可选类型和默认值）、ref以及如何通过defineExpose暴露子组件的属性和方法。

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

1 父组件通过v-bind(或者属性绑定)绑定一个数据，传递字符串类型是不需要v-bind，传递非字符串类型时候可以通过冒号简写

//  父组件
<template>
  <Son ref="sonRef" title="晚上好" :arr="[1,2,3]"></Son>
</template>

2 子组件通过defineProps接收,defineProps是无须引入的直接使用即可，下面这种写法是没有默认值

//  子组件
<template>
  <div>我是父组件传过来的title------{{title}}</div>
   <div>我是父组件传过来的arr------{{arr}}</div>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";

// 这里的ref也可以用reactive,如果使用reactive传递值的时候就不用list.value了
const list = ref<number[]>([7,8,9])  
// 通过type声明Props
type Props = {
    title?: string, // ？表示可选
    arr?: number[],
}

// 1 ts第一种写法，但是这种写法是没默认值的
 defineProps<{
    title: string,
    arr: number[],
 }>()
</script>

3 下面这种方式也是通过defineProps接收,但是这种写法是有默认值的，是ts中特有的写法

//  子组件
<template>
  <div>我是父组件传过来的title------{{title}}</div>
   <div>我是父组件传过来的arr------{{arr}}</div>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";

const list = ref<number[]>([7,8,9])
// 1 可以使用type声明Props
type Props = {
    title?: string, // ？表示可选
    arr?: number[],
}

// 2 ts第二种写法，withDefaults是ts中特有的,是有默认值的
withDefaults(defineProps<Props>(),{
    title: '默认值',
    arr: () => [],
})
</script>

4 刚才子组件中使用的是type声明Props，也可以使用下面这种方式去声明

interface Props  {
    title?: string,
    arr?: number[],
}

5 如果在js中，子组件中defineProps是下面这种写法

defineProps({
     title:{
        type: String,
        default: '',
     },
    arr:{
        type: Array,
        default: [],
     }
 })

6 在父组件中接收

// 父组件
<template>
  <Son  @send="sonSend"></Son>
</template>

<script setup lang="ts">
import Son from './components/Son.vue'
const sonSend = (val:number[]) => {
    console.log('子组件传过来的值',val)
}

</script>

7 父组件使用子组件的方法或属性，要在子组件中通过defineExpose向外暴露出去

//  子组件
<script lang="ts" setup>
import { ref} from "vue";
const list = ref<number[]>([7,8,9])
const test = () => {
    console.log('子组件的方法')
}
// defineExpose用法，可以向外暴露属性或者方法
defineExpose({
    list,  // list是向外暴露的属性/值
    test,  // test是向外暴露的方法
})
</script>

8 父组件中使用子组件的方法，要通过ref获取子组件实例

//  父组件
<template>
  <Son ref="sonRef"></Son>
</template>


<script setup lang="ts">
import Son from './components/Son.vue'
import {onMounted, ref} from "vue";

const sonRef = ref()

//使用子子组件的属性
onMounted(()=>{
    console.log(sonRef.value?.list)  // 这里为了测试，可以不在mounted中，根据自己在哪个地方使用即可
    console.log(sonRef.value?.test())
})
</script>