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

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);
});

defineOptions

vue3.3

defineOptions({ name: 'x-test', inheritAttrs: false })

defineModel

vue3.4
父组件

<x-test v-model="name"></x-test>

子组件

const name = defineModel()
const name = defineModel({ type: String, default: '' })

父组件

<x-test v-model="showDialog"></x-test>

子组件

const show = defineModel()
const show = defineModel({ type: Boolean, default: false })

父组件

<x-test v-model:show="showDialog"></x-test>

子组件

const visible = defineModel('show')
const visible = defineModel('show', { type: Boolean, default: false })