vue3父子组件之间传参

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

如以下代码

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

传递非字符串类型需要加v-bind  简写 冒号

子组件接受值

通过defineProps 来接受 defineProps是无须引入的直接使用即可

如果我们使用的TypeScript

可以使用传递字面量类型的纯类型语法做为参数

如 这是TS特有的

如果你使用的不是TS

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

TS 特有的默认值方式

withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

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

子组件给父组件传参

是通过defineEmits派发一个事件

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

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

父组件接受子组件的事件

我们从Menu 组件接受子组件派发的事件on-click 后面是我们自己定义的函数名称getList

会把参数返回过来

子组件暴露给父组件内部属性

通过defineExpose

我们从父组件获取子组件实例通过ref

 
  const menus = ref(null)

然后打印menus.value 发现没有任何属性

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

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

这样父组件就可以读到了。