vue父子组件通信（一）父子调用和通信（2）VUE3

父组件调用子组件同vue2一、父 → 子props父组件传数据给子组件!-- 父组件 -- ChildComponent :messagehello :count5 /!-- 子组件 -- script setup const props defineProps({ message: String, count: Number }) /script二、子 → 父emit子组件触发事件父组件监听!-- 子组件 -- script setup const emit defineEmits([update, close]) function handleClick() { emit(update, { value: 123 }) } /script!-- 父组件 -- ChildComponent updatehandleUpdate / script setup function handleUpdate(data) { console.log(data.value) // 123 } /script三、父访问子exposeref父组件直接调用子组件的方法或访问数据!-- 子组件 -- script setup import { ref } from vue const count ref(0) function reset() { count.value 0 } defineExpose({ count, reset }) // 必须 expose 才能被父访问 /script!-- 父组件 -- ChildComponent refchildRef / script setup import { ref } from vue const childRef ref(null) function callChild() { childRef.value.reset() // 调用子组件方法 } /script升级写法v-model双向绑定语法糖本质是propsemit的封装适合表单类组件!-- 父组件 -- ChildComponent v-modelvalue / !-- 等价于 -- ChildComponent :modelValuevalue update:modelValuevalue $event /!-- 子组件 -- script setup defineProps([modelValue]) const emit defineEmits([update:modelValue]) function onChange(val) { emit(update:modelValue, val) } /script