vue3 父子组件通信

1.props

父组件传参不变，子组件接收：

通过defineProps 来接受, 无需额外引入，直接使用

<template>
<div class="menu">
　　菜单区域 {{ title }}
　　<div>{{ data }}</div>
</div>
</template>

<script setup lang="ts">
defineProps<{
　　title:string,
　　data:number[]
}>()
</script>

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

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

 

2.emit

父组件接收不变，子组件传参如下：

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

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

const emit = defineEmits(['increment'])
const count = ref(100)
const increment = () => {
  count.value++
  emit('increment', count.value)
}

 

defineExpose

明确哪些数据或方法应该被暴露给父组件 

<template>
  <Child ref="childComponentRef" />
  <button @click="getChildData">获取子组件数据</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './Child.vue';

// 定义一个 ref 来存储子组件的实例
const childComponentRef = ref<InstanceType<typeof Child> | null>(null);

function getChildData() {
  if (childComponentRef.value) {
    console.log(childComponentRef.value.list);
  }
}
</script>

 

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