vue3+ts中 父子组件传参defineProps、defineEmits、defineExpose

defineProps

父
<HelloWorld :list="[2, 3, 5]" msg="父组件传递给子组件"  />

子
interface Props {
  msg: string;
  list: Array<number>;
}

第一种写法 没有默认值
defineProps<Props>();

第二种写法 有默认值
withDefaults(defineProps<Props>(), {
  msg: "子组件默认值",
  list: () => [1, 2, 3],
});

defineEmits

父
<HelloWorld @taps="handleTaps" />
const handleTaps = (name: string) => {
  console.log("子组件传递的值为", name);
};

子
<h1 @click="handleEmit">{{ msg }}</h1>

interface Emits {
  (event: "taps", name: string): void;
}

const emits = defineEmits<Emits>();
const handleEmit = () => {
  emits("taps");
  emits("taps", "zs");
};

defineExpose

暴露自己的属性供夫组件使用

子
const count = ref(0);
defineExpose({
  count,
});

父
<HelloWorld  ref="child" />
const child = ref(null);
onMounted(() => {
  console.log("child", child.value.count);
});