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

父组件调用子组件

同vue2

一、父 → 子：props

父组件传数据给子组件：

<!-- 父组件 --> <ChildComponent :message="hello" :count="5" />

<!-- 子组件 --> <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 @update="handleUpdate" /> <script setup> function handleUpdate(data) { console.log(data.value) // 123 } </script>

三、父访问子：expose+ref

父组件直接调用子组件的方法或访问数据：

<!-- 子组件 --> <script setup> import { ref } from 'vue' const count = ref(0) function reset() { count.value = 0 } defineExpose({ count, reset }) // 必须 expose 才能被父访问 </script>

<!-- 父组件 --> <ChildComponent ref="childRef" /> <script setup> import { ref } from 'vue' const childRef = ref(null) function callChild() { childRef.value.reset() // 调用子组件方法 } </script>

升级写法：v-model（双向绑定语法糖）

本质是props+emit的封装，适合表单类组件：

<!-- 父组件 --> <ChildComponent v-model="value" /> <!-- 等价于 --> <ChildComponent :modelValue="value" @update:modelValue="value = $event" />

<!-- 子组件 --> <script setup> defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) function onChange(val) { emit('update:modelValue', val) } </script>