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

父传子

<template>
    <div class="layout">
        <!-- <Menu v-bind:data="data"  title="我是标题"></Menu> -->
				<Menu :data="data"  title="我是标题"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/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 class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
 
const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}
</script>