父组件通过v-bind（简写 :）绑定一个数据，然后子组件通过defineProps接受传过来的值。

给Menu组件 传递了一个title 字符串类型是不需要v-bind

<template><div class="layout"><Menu  title="我是标题"></Menu></div>
</template>

传递非字符串类型需要加v-bind （:）

<template><div class="layout"><Menu :data="data"  title="我是标题"></Menu></div>
</template><script setup lang="ts">
import Menu from './Menu/index.vue'
import { reactive } from 'vue';
const data = reactive<number[]>([1, 2, 3])
</script>

子组件接受值

通过defineProps 来接受 （注意：defineProps是无须引入的直接使用即可！！！）

如果使用的是TS

<template><div class="menu">菜单区域 {{ title }}<div>{{ data }}</div></div>
</template><script setup lang="ts">
defineProps<{title:string,data:number[]
}>()
</script>

如果使用的不是TS

defineProps({title:{default:"",type:string},data:Array
})

TS 特有的默认值方式

withDefaults是个函数也是无须引入可以直接使用，第一个参数接收一个props函数、第二个参数是一个对象设置默认值

type Props = {title?: string,data?: number[]
}
withDefaults(defineProps<Props>(), {title: "张三",data: () => [1, 2, 3]
})

子组件给父组件传参

是通过defineEmits派发一个事件

<template><div class="menu"><button @click="clickTap">派发给父组件</button></div>
</template><script setup lang="ts">
import { reactive } from 'vue'
const list = reactive<number[]>([4, 5, 6])const emit = defineEmits(['on-click'])//如果用了ts可以这样两种方式
// const emit = defineEmits<{
//     (e: "on-click", name: string): void
// }>()
const clickTap = () => {emit('on-click', list)
}</script>

我们在子组件绑定了一个click 事件 然后通过defineEmits 注册了一个自定义事件

点击click 触发 emit 去调用我们注册的事件 然后传递参数

父组件接受子组件的事件

<template><div class="layout"><Menu @on-click="getList"></Menu></div>
</template><script setup lang="ts">
import Menu from './Menu/index.vue'
import { reactive } from 'vue';
const data = reactive<number[]>([1, 2, 3])
const getList = (list: number[]) => {console.log(list,'父组件接受子组件');
}
</script>

子组件暴露给父组件内部属性,通过defineExpose,从父组件获取子组件实例通过ref

<Menu ref="refMenu"></Menu>

!!!注意此处的ref不需要写成:ref

<script setup lang="ts">
import MenuCom from '../xx.vue'
//注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu)
//为了获取 MenuCom 的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型
const refMenu = ref<InstanceType<typeof MenuCom> | null>(null)
</script>

控制台打印menus.value 发现没有任何属性

这时候父组件想要读到子组件的属性可以通过 defineExpose暴露

const list = reactive<number[]>([4, 5, 6])defineExpose({list
})

这样父组件就可以访问到自组件内部的属性或者方法了