Vue的组件通信方式
一. props 父=》子 ；emit 子=》父 通信
//父组件 <template> <div class="demo"> <Child :text="text" @changeText="changeText" />//子组件触发change-text事件，更新text的值 <h1>{{ appText }}</h1>//点击子组件按钮后为hello worldchanged </div> </template> <script lang="ts" setup> import Child from '@/views/childOne .vue' import { ref } from 'vue' const text = ref('hello world') const appText = ref('hello world') // 父组件监听子组件触发的change-text事件，更新text的值 const changeText = (newText: string) => { appText.value += newText } </script> <style scoped></style> //子组件 <template> <div> <h2>{{ props.text }}</h2> <button @click="changeText">change</button> </div> </template> <script lang="ts" setup> // 子组件接收父组件传递的text属性 const props = defineProps({ text: String }); const emit = defineEmits(['changeText']) // 子组件点击按钮触发changeText事件，传递新的文本 const changeText = () => { emit('changeText', ' changed')//子组件触发changeText事件，传递新的文本 } </script> <style scoped></style>二.expose +ref 导出获取子组件的属性和方法
<template> <div>父组件：拿到子组件的message数据：{{ msg }}</div> <button @click="callChildFn">调用子组件的方法</button> <hr /> <Child ref="com" />//ref绑定子组件 </template> <script setup> import Child from './child.vue'; const com = ref(null); // 通过 模板ref 绑定子组件 const msg = ref(''); onMounted(() => { // 在加载完成后，将子组件的 message 赋值给 msg msg.value = com.value.message; }); function callChildFn() { // 调用子组件的 show方法 com.value.show(); // 重新将 子组件的message 赋值给 msg msg.value = com.value.message; } </script> //子组件 <template> <div> Expose子组件</div> </template> <script setup> const message = ref('子组件传递得信息'); const show = () => { console.log('子组件得方法'); }; //交出子组件函数 defineExpose({ message, show, }); </script>三.v-model 双向通信
<template> <div> <Child v-model="text" v-model:msg1="message1" v-model:msg2="message2"/> </div> </template> <script setup lang="ts"> import Child from '@/views/childOne .vue'; import { ref } from 'vue'; const text = ref<string>('默认'); const message1 = ref<string>('水果1'); const message2 = ref<string>('水果2'); </script>//子组件： <template> <div> <div><button @click="changeText">修改text</button> {{ modelValue }}</div> <div><button @click="changeMsg1">修改msg1</button> {{ msg1 }}</div> <div><button @click="changeMsg2">修改msg2</button> {{ msg2 }}</div> </div> </template> <script setup lang="ts"> // 接收 defineProps({ 'modelValue': String, //默认为modelValue msg1: String, msg2: String, }); //默认为modelValue,update:+方法名 const emit = defineEmits(['update:modelValue', 'update:msg1', 'update:msg2']); function changeMsg1() { emit('update:msg1', '蔬菜1'); } function changeMsg2() { emit('update:msg2', '蔬菜2'); } function changeText() { emit('update:modelValue', 'Text2') } </script>总结：
Props(单向数据流)
- 细节:父组件通过
v-bind(或:) 将数据绑定到子组件的属性上。子组件需要在props选项中声明接收的属性名，并可指定类型 (type)、是否必需 (required)、默认值 (default)、验证函数 (validator)。
- 细节:父组件通过
Emit (自定义事件)
- 细节:子组件
const emit = defineEmits(['event-name']); emit('event-name', payload)(Composition API +<script setup>) 触发自定义事件。payload是传递给父组件的数据。 - 父组件处理:父组件在模板中使用
v-on(或@) 监听子组件触发的事件，如@event-name="handler"。handler是父组件中定义的方法，接收payload作为参数进行处理。
- 细节:子组件
Expose + Ref
- 细节 (Vue 3):子组件使用
defineExpose显式暴露其内部属性或方法（如defineExpose({ publicMethod })）。 - 父组件操作:父组件通过
ref属性 (<ChildComponent ref="childRef" />) 为子组件实例创建引用。在父组件脚本中，const childRef = ref(null); childRef.value?.publicMethod()(Composition API) 访问暴露的内容。 - 注意:访问需确保子组件已挂载（如在
mounted钩子或watchref变化后）。
- 细节 (Vue 3):子组件使用
v-model (双向绑定语法糖)
- 细节 (Vue 3):
v-model默认对应一个名为modelValue的prop和一个名为update:modelValue的事件。父组件v-model="parentData"，子组件接收modelValueprop，并在需要更新时触发emit('update:modelValue', newValue)。 - 参数:可指定参数实现多个绑定，如
v-model:title="pageTitle"，对应titleprop和update:title事件。 - 本质:是
:modelValue="parentData" @update:modelValue="parentData = $event"的语法糖。
- 细节 (Vue 3):