探索 Vue3 (一) 父子组件传参

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

如以下代码

子组件代码：

父组件代码：

 运行结果：

可以看到标题从父组件传值给子组件，data里面是用了子组件默认值

子组件给父组件传参

是通过defineEmits派发一个事件

子组件代码：

父组件代码：

const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}

运行结果：

 

如果是Ts子组件还可以这么写:

//如果用了ts可以这样两种方式
const emit = defineEmits<{
    (e: "send-data", name: string): void

}>()

 

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

通过defineExpose

父组件获取子组件实例通过ref

子组件代码：

父组件代码：

这里直接通过编译工具可以点出来属性。

 import Son from '@/components/Son.vue'
  const refSon = ref>()
  refSon.value?.love