vue3父子组件通信常用方法

zzz

1. Props (父传子)
父组件通过属性（Attributes）的方式将数据传递给子组件。

1. <script setup>
   
2. // 1. 接收父组件传递的 props
   
3. const props = defineProps({
   
4. title: String,
   
5. count: {
   
6. type: Number,
   
7. default: 0
   
8. }
   
9. });
   
10. </script>
    
11. <template>
    
12. <div>
    
13. <h2>{{ title }}</h2>
    
14. <p>Count: {{ count }}</p>
    
15. </div>
    
16. </template>

复制代码

1. //父组件 (Parent.vue):通过 v-bind: (或缩写 :) 动态传递数据。
   
2. <script setup>
   
3. import { ref } from 'vue';
   
4. import Child from './Child.vue';
   
5. const parentCount = ref(10);
   
6. const parentTitle = ref('Hello from Parent');
   
7. </script>
   
8. <template>
   
9. <div>
   
10. <!-- 2. 传递 props -->
    
11. <Child :title="parentTitle" :count="parentCount" />
    
12. </div>
    
13. </template>

复制代码

1. 特性:
   
2. 1.单向数据流：数据只能从父组件流向子组件（知道数据从哪里来，为何变化）。
   
3. 2.强类型/验证：可以详细定义每个 Prop 的类型、默认值、必要性及自定义验证器。

复制代码

2. 自定义事件 (子传父)
子组件通过触发（$emit）自定义事件，父组件通过监听（v-on）该事件来接收数据或执行操作。

1. //子组件 (Child.vue):使用 defineEmits 来声明要触发的事件。
   
2. <script setup>
   
3. // 1. 声明要触发的事件
   
4. const emit = defineEmits(['updateCount', 'reset']);
   
5. const handleClick = () => {
   
6. // 2. 触发事件，并传递数据
   
7. emit('updateCount', 5); // 传递一个数值
   
8. };
   
9. const reset = () => {
   
10. emit('reset'); // 触发事件，可以不传递数据
    
11. };
    
12. </script>
    
13. <template>
    
14. <button @click="handleClick">Add 5</button>
    
15. <button @click="reset">Reset</button>
    
16. </template>

复制代码

1. //父组件 (Parent.vue):使用 v-on: (或缩写 @)来监听子组件触发的事件。
   
2. <script setup>
   
3. import { ref } from 'vue';
   
4. import Child from './Child.vue';
   
5. const count = ref(0);
   
6. // 3. 定义事件处理函数，接收子组件传递的数据
   
7. const handleUpdate = (increment) => {
   
8. count.value += increment;
   
9. };
   
10. const handleReset = () => {
    
11. count.value = 0;
    
12. };
    
13. </script>
    
14. <template>
    
15. <div>
    
16. <p>Parent Count: {{ count }}</p>
    
17. <!-- 监听子组件触发的事件 -->
    
18. <Child @update-count="handleUpdate" @reset="handleReset" />
    
19. </div>
    
20. </template>

复制代码

1. 特性:
   
2. 1.是子组件向父组件通信的核心方式。
   
3. 2.事件名可以使用 kebab-case（update-count）或 camelCase（updateCount），但在模板中建议使用 kebab-case。

复制代码

3. v-model (双向绑定)
v-model 是 props 和 自定义事件 的组合语法糖，用于实现父子组件数据的双向绑定。

1. //子组件 (Child.vue)
   
2. <script setup>
   
3. // 1. 使用 defineModel 宏
   
4. // 它声明了一个 modelValue prop 和一个 update:modelValue 事件
   
5. const model = defineModel();
   
6. const updateValue = (newValue) => {
   
7. model.value = newValue; // 直接赋值，会自动触发更新
   
8. };
   
9. </script>
   
10. <template>
    
11. <input :value="model" @input="updateValue($event.target.value)" />
    
12. </template>

复制代码

1. //父组件 (Parent.vue)
   
2. <script setup>
   
3. import { ref } from 'vue';
   
4. import Child from './Child.vue';
   
5. const message = ref('Hello');
   
6. </script>
   
7. <template>
   
8. <!-- 2. 使用 v-model 进行双向绑定 -->
   
9. <Child v-model="message" />
   
10. <p>Parent bound value: {{ message }}</p>
    
11. </template>

复制代码

1. //多个 v-model 绑定：可以使用 defineModel('modelName') 为多个属性创建双向绑定。
   
2. // Child.vue
   
3. const title = defineModel('title');
   
4. const visible = defineModel('visible');
   
5. // Parent.vue
   
6. <Child v-model:title="pageTitle" v-model:visible="isVisible" />

复制代码

4. 模板引用 - 父直接访问子
父组件通过 ref 属性直接获取子组件的实例，从而调用其方法或访问其属性。

1. //子组件 (Child.vue):使用 defineExpose 显式暴露需要被父组件访问的属性或方法。
   
2. <script setup>
   
3. import { ref } from 'vue';
   
4. const childState = ref('Child Data');
   
5. const childMethod = () => {
   
6. console.log('Method called in child!');
   
7. };
   
8. // 1. 暴露给父组件
   
9. defineExpose({
   
10. childState,
    
11. childMethod
    
12. });
    
13. </script>

复制代码

1. //父组件 (Parent.vue):使用 ref 和相同的变量名来获取模板引用。
   
2. <script setup>
   
3. import { ref, onMounted } from 'vue';
   
4. import Child from './Child.vue';
   
5. // 2. 创建一个 ref 来持有子组件的引用
   
6. const childRef = ref(null);
   
7. onMounted(() => {
   
8. // 3. 在生命周期后，可以访问子组件暴露出的属性和方法
   
9. console.log(childRef.value.childState); // 'Child Data'
   
10. childRef.value.childMethod(); // 'Method called in child!'
    
11. });
    
12. </script>
    
13. <template>
    
14. <!-- 将 ref 绑定到子组件上 -->
    
15. <Child ref="childRef" />
    
16. </template>

复制代码

1. 特性:
   
2. 1.命令式操作：常用于需要直接操控子组件 DOM 元素或调用其方法的场景（如输入框聚焦、触发动画等）。
   
3. 2.谨慎使用：应优先考虑使用 props 和 events 进行数据流管理，避免过度使用 refs 导致代码结构混乱。

复制代码