vue3+ts的父子组件传参以及withDefaults、defineExpose用法介绍

1、父组件给子组件传参 以及withDefaults用法介绍

父组件代码

<template>
	<div class="home_main">
		<Header></Header>
		<**传的字符串类型的**
		 <!-- 传的数组类型与字符串类型 -->
		 <!-- ref获取子组件实力 -->
		<Menus ref="menudata" :dataChildList="dataList" info="我想要个熊猫"></Menus>
		<div>
			<Content></Content>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import Header from "./header.vue"
import Menus from "./menus.vue"
import Content from "./content.vue"
const menuData = ref(null)
console.log(menuData.value) //可以获取到实例但是里面什么都没有
const dataList = reactive<number[]>([6,8,9,0,10])

</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100%;
	background: #d7d7d7;
	font-size: 30px;
	color: aqua
}
</style>

使用了defineExpose({list})后,就相当于子组件给父组件暴露值可以获取到了

子组件代码

<template>
    <div class="main">
        菜单区域{{ info }}
    </div>
</template>

<script lang='ts' setup>
import { reactive } from "vue"
const list = reactive<number[]>([8,8,8])
type Props = {
    info:string,   //字符串类型的数据
     dataChildList: number[]  //数组类型
}
defineProps<Props>()    //这个一定要写的
withDefaults(defineProps<Props>(),{    //withDefaults可以指定默认值
   info:"我想要你好好的"  //可以直接指定
   dataChildList:()=>[2,2,3,4]  //这个不可以直接指定需要通过这个方式指定
})
defineExpose({list})
</script>

<style scoped lang="scss">
</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/ba70ef2fd4d348978ed411be95e
2、子组件给父组件传参(派发)

子组件代码

<template>
    <div class="main">
        菜单区域
    </div>
    <button @click="clickTab">派发1</button>
     <button @click="clickTab2">派发2</button>
</template>

<script lang='ts' setup>
import { reactive } from "vue"
const list = reactive<number[]>([8, 8, 8, 8])
const emit = defineEmits(['touch-click', 'touch-click2'])
const clickTab = () => {
    emit('touch-click', list)   // emit('touch-click', list,...) 后面可以接多个值
}
const clickTab2 = () => {
    emit('touch-click2', list)   // emit('touch-click2', list,...) 后面可以接多个值
}

</script>

<style scoped lang="scss">
</style>

父组件代码

<template>
	<div class="home_main">
		<Header></Header>
		<Menus @touch-click="getDataList" @touch-click2="getList"></Menus>
		<div>
			<Content></Content>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import Header from "./header.vue"
import Menus from "./menus.vue"
import Content from "./content.vue"
const getDataList = (list: number[], flag: boolean) => {
	console.log(list, "我是子组件传过来的派发1", flag)
}
const getList = (list: number[], flag: boolean) => {
	console.log(list, "我是子组件传过来的派发2", flag)
}
</script>

<style lang="scss">
.home_main {
	width: 100%;
	height: 100%;
	background: #d7d7d7;
	font-size: 30px;
	color: aqua
}
</style>