Vue3父子组件传属性和方法调用Demo

说明目录父组件给子组件传值和方法父组件给子组件传值-使用defineProps接受父组件属性值父组件给子组件传值-使用defineModel接受父组件v-model值当子组件只需要接收父组件一个v-model值时,写法1如下:子组件接收单个v-model写法2如下:当子组件需要接收父组件多个v-model值时,写法如下:

父组件给子组件传方法

子组件调用父组件方法-使用defineEmits调用父组件方法子组件暴露属性和方法给父组件调用-使用defineExpose暴露子组件属性和方法

说明

这里记录下自己学习Vue3父子组件怎么传值和方法怎么互相调用，防止后面继续踩坑且方便以后直接使用。这里承接自己的博客Vue3+vite优化基础架构（3）— 优化vue-i18n国际化配置这篇博客，在该博客项目的基础上学习Vue3父子组件传值及使用。

官方文档：https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

目录

这里父组件是test-management1文件夹下的index.vue，子组件是test-management1文件夹下的components文件夹的test-child.vue。

父组件给子组件传值和方法

父组件给子组件传属性值，有2种方式：

第一种方式是在子组件里面使用defineProps来接受父组件那边传过来的属性值。第二种方式是在子组件里面使用defineModel来接受父组件那边传过来的v-model值。

父组件给子组件传值-使用defineProps接受父组件属性值

父组件代码如下:

<code><template>

<div>测试管理1页面</div>

<div>

<!--在父组件里面使用子组件TestChild-->

<!--父组件向子组件传参,参数为name,age,isOpenEmail,content,score这5个-->

<TestChild

:name="testName"code>

:age="testAge"code>

:isOpenEmail="testIsOpenEmail"code>

:content="testContent"code>

:score="testScore"code>

/>

</div>

</template>

<script setup name="test-management1">code>

import { -- -->ref} from "vue"

//引入子组件

import TestChild from './components/test-child.vue'

//定义name值

const testName=ref('张三')

//定义age值

const testAge=ref(18)

//定义isOpenEmail开通邮箱值

const testIsOpenEmail=ref(false)

//定义content值

const testContent=ref(['测试值1','测试值2','测试值3'])

//定义score值

const testScore=ref({

curriculum:"语文",

score:60

})

</script>

<style scoped>

</style>

子组件代码如下:

<template>

<!--显示父组件传过来的参数值-->

<div>

<!--在页面模版里面如果要使用父组件里面穿过来的参数，有2种写法，都能在页面显示出来：-->

<!--第一种全写:{ { props.name}}-->

<div>name名字为:{ { props.name}}</div>

<!--第二种简写:{ { name}},这种简写有个问题,如果你在js中定义了一个相同名的参数,它会优先读取定义的那个参数,不会去读父组件传过来的参数-->

<div>name名字为:{ { name}}</div>

<div>age年龄为:{ { props.age}}</div>

<div>isOpenEmail是否开通邮箱为:{ { props.isOpenEmail}}</div>

<div>content内容为:{ { props.content[0]}}</div>

<div>score分数为:{ { props.score.score}}</div>

</div>

</template>

<script setup>

import { onMounted} from 'vue'

//const name="haha"code>

//页面初始化时执行

onMounted(() => { -- -->

console.info("从父组件那边传过来的值为:")

console.info("name:",props.name)

console.info("age:",props.age)

console.info("isOpenEmail:",props.isOpenEmail)

console.info("content:",props.content)

console.info("score:",props.score)

})

//使用defineProps接收父组件穿传过来的参数

const props = defineProps({

//从父组件那边接收一个String类型的参数,参数名叫name(名字)

name: {

required:false,//是否必须传该name参数,不写默认为false,true为必须传该参数,false为可以不传该name参数

type: String,//参数类型为String字符串

default: ''//默认值为空值

},

//从父组件那边接收一个Number类型的参数,参数名叫age(年龄)

age: {

type: Number,//参数类型为Number整型

default: 0//默认值为0

},

//从父组件那边接收一个Boolean类型的参数,参数名叫isOpenEmail(是否开通邮箱)

isOpenEmail: {

type: Boolean,//参数类型为Boolean布尔类型

default: false//默认值为false

},

//从父组件那边接收一个content类型的参数,参数名叫content(内容)

content: {

type: Array,//参数类型为Array数组类型

default: []//默认值为空数组

},

//从父组件那边接收一个Object类型的参数,参数名叫score(分数)

score: {

type: Object,//参数类型为Object对象类型

default: { }//默认值为空对象

}

})

</script>

<style scoped>

</style>

谷歌浏览器效果显示

注意事项

1.在页面模版中如果直接使用简写{ -- -->{name}}这种写法，如果在js中又重新定义了一个name属性,那么会优先使用定义的这个name值，不会使用父组件那边传值过来的name属性值。如下:

2.如果子组件接收的参数有required属性而且为true，如果父组件不传该属性的话，那么控制台会出现警告。如下:

浏览器结果如下:

父组件给子组件传值-使用defineModel接受父组件v-model值