常见的5种Vue组件通信方式总结，

常见的5种Vue组件通信方式总结，

目录

• 引言
• 1. 父子通信（Props）
• 父子通信（Props）的优点和缺点如下：
• 2. 子父通信（$emit）
• 子父通信（$emit）的优点和缺点如下：
• 3. 子父通信（双向绑定）
• 子父通信（双向绑定）
• 4. 子父通信（ref）
• 子父通信（ref）优点和缺点
• 5. 父子组件通信（provide/inject）
• 父子组件通信（provide/inject）优点和缺点：

引言

在 Vue.js 中，组件通信是开发过程中非常重要的一部分，它涉及到不同组件之间的数据传递和交互。本文将介绍如何实现父子组件之间的有效通信，包括 Props、双向绑定、ref、以及 provide/inject 这几种常见的组件通信方式。

1. 父子通信（Props）

在 Vue.js 中，父子组件通信的最基本方式是通过 Props。父组件可以向子组件传递数据或方法，子组件通过 props 接收这些数据，从而实现父子组件之间的通信。

父组件：

<!-- Parent.vue -->
<template>
  <div class="hd">
    <input type="text" name="" id="" v-model="msg">
    <button @click="add">添加 </button>
  </div>
  <Child :list="list" />
</template>

<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
const list = ref(['html', 'css'])

const msg = ref('')

const add = () => {
  list.value.push(msg.value)

}
</script>

子组件：

<!-- Child.vue -->
<template>
    <div class="bd">
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>

import { defineProps } from 'vue';
defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
</script>

父子通信（Props）的优点和缺点如下：

优点：

• 简单易懂：  Props 是 Vue.js 中最基本的组件通信方式之一，使用简单直观，易于理解和上手。

• 单向数据流：  父组件通过 Props 向子组件传递数据，这种单向数据流使得数据变化的来源清晰明了，便于追踪和调试。

• 组件解耦：  使用 Props 可以让组件之间保持相对独立，提高了组件的可复用性和可维护性。

缺点：

• 层级限制：  Props 是父子组件之间的通信方式，当组件层级较深时，需要逐层传递 Props，增加了组件间的耦合性。

• 大规模应用复杂性：  在大型应用中，如果组件关系错综复杂，过多的 Props 传递会导致代码不够清晰，维护起来较为困难。

• 数据冗余：  有时为了满足一个子组件的特定需求，需要在父组件中传递较多的数据，可能会导致数据冗余或不必要的传递。

2. 子父通信（$emit）

子组件可以使用 $emit 方法发布一个事件，父组件可以通过监听这个事件来订阅，从而实现子父组件之间的通信。

子组件：

<!-- Child.vue -->
<template>
    <div class="hd">
        <input type="text" name="" id="" v-model="msg">
        <button @click="add">添加</button>
    </div>

</template>

<script setup>
import { ref } from 'vue';

const msg = ref('')
const emits = defineEmits(['add']) //创建一个add事件

const add = () => {
    emits('add', msg.value);
    console.log(msg.value);
    msg.value = '';
}

</script>

父组件：

<!-- Parent.vue -->
<template>
    <Child @add="handle" />

    <div class="bd">
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import Child from './components/Child.vue'

const list = ref(['html', 'css'])

const handle = (e) => {
    list.value.push(e)
}
</script>

子父通信（$emit）的优点和缺点如下：

优点：

• 灵活性：  使用 $emit 实现子父通信可以非常灵活地传递数据和消息，子组件可以向父组件传递任意类型的数据。

• 解耦合：  子组件通过 $emit 触发事件，父组件监听事件，实现了组件之间的解耦合，提高了组件的独立性和复用性。

• 响应式：  通过 $emit 传递的数据在父组件中是响应式的，可以实时更新视图，提高了用户体验。

缺点：

• 事件命名冲突：  如果项目较大或组件较多，可能会出现事件命名冲突的情况，需要谨慎管理事件名称。

• 跨级通信复杂性：  当组件层级较深时，子组件向父组件传递数据可能需要经过多层中间组件，增加了通信的复杂性。

• 不适用于兄弟组件通信：  $emit 主要用于子组件向父组件传递数据，对于兄弟组件之间的通信并不直接适用，需要借助其他方式实现。

3. 子父通信（双向绑定）

子组件可以通过 $emit 方法将修改后的数据发送给父组件，父组件可以通过 v-model 在子组件上实现双向绑定，实现父子组件之间数据的双向同步。

父组件：

<!-- Parent.vue -->
<template>
    <Child v-model:list="list" />

    <div class="bd">
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import Child from './components/Child.vue'

const list = ref(['html', 'css'])

</script>

子组件：

<!-- Child.vue -->
<template>
    <div class="hd">
        <input type="text" name="" id="" v-model="msg">
        <button @click="add">添加</button>
    </div>

</template>

<script setup>
import { ref } from 'vue';

const msg = ref('')
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

const emits = defineEmits(['update:list'])

const add = () => {
    const arr = props.list
    arr.push(msg.value)
    emits('update:list', arr)
    msg.value = ''
}

</script>
    

子父通信（双向绑定）

优点：

• 数据同步：  使用双向绑定可以实现数据的双向同步，子组件修改数据后可以直接影响到父组件中的数据，反之亦然。

• 简洁明了：  双向绑定让数据流动更加清晰明了，减少了手动管理数据的复杂性。

• 提高开发效率：  在某些场景下，双向绑定可以减少编写大量的事件监听和触发逻辑，提高开发效率。

缺点：

• 数据流不清晰：  在复杂的组件结构中，双向绑定可能使得数据流变得不够清晰，增加调试和维护的难度。

• 难以追踪：  当数据在组件之间频繁传递和修改时，可能会难以追踪数据的变化来源，导致代码的可读性降低。

• 潜在的性能问题：  双向绑定会引起数据的频繁更新和DOM重新渲染，可能会对性能产生一定的影响，特别是在大型应用中。

4. 子父通信（ref）

子组件可以使用 defineExpose 暴露需要共享的值，父组件可以利用 ref 读取整个子组件对象来获取暴露的值。

父组件：

• 获取子组件实例：  通过在子组件标签上添加 ref 属性，可以在父组件中来访问子组件的实例。
• 直接操作子组件：  父组件可以通过 ref 获取子组件的实例，然后直接调用子组件的方法或访问子组件的数据，实现父组件对子组件的控制和操作。

<!-- Parent.vue -->
<template>
    <Child ref="childRef" />
    <div class="bd">
        <ul>
            <li v-for="item in childRef?.list">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Child from './components/Child_4.vue'

const childRef = ref(null)

</script>

子组件：

• 提供给父组件访问的接口：  子组件可以通过 ref 方法提供自身的实例给父组件，使得父组件可以直接操作子组件。

<!-- Child.vue -->
<template>
    <div class="hd">
        <input type="text" name="" id="" v-model="msg">
        <button @click="add">添加</button>
    </div>

</template>

<script setup>
import { ref } from 'vue';

const list = ref(['html', 'css'])
const msg = ref('')

const add = () => {
    list.value.push(msg.value)
    msg.value = ''
}

defineExpose({ list }) //子组件暴露出去的数据

</script>

子父通信（ref）优点和缺点

优点：

• 直接访问子组件：  使用 ref 可以直接在父组件中引用和操作子组件的实例，方便进行数据传递、调用子组件方法等。

• 灵活性：  ref 提供了一种灵活的方式来处理子组件的数据和逻辑，可以根据具体需求自由地操作子组件。

• 适用范围广泛：  ref 不仅可以用于访问子组件，还可以用于访问 DOM 元素或其他 Vue 实例，具有较强的通用性。

缺点：

• 耦合性增加：  直接在父组件中操作子组件的实例可能会增加组件之间的耦合性，降低了组件的独立性和复用性。

• 不符合单向数据流原则：  使用 ref 可能打破 Vue.js 单向数据流的原则，使得数据流变得不够清晰，增加了代码的复杂性。

5. 父子组件通信（provide/inject）

父组件可以通过 provide 提供数据或方法，子组件可以通过 inject 注入所需的数据或方法，实现父子组件之间的通信。

父组件：

• 使用 provide 来提供数据，这些数据将会被后代组件的 inject 所接收。

<!-- Parent.vue -->
<template>
    <div class="hd">
        <input type="text" name="" id="" v-model="msg">
        <button @click="add">添加</button>
    </div>
    <Child />
</template>

<script setup>
import { ref, provide } from 'vue';
import Child from './components/Child5.vue'

const msg = ref('')
const list = ref(['html', 'css'])

provide('list', list.value)

const add = () => {
    list.value.push(msg.value)
}
</script>

子组件：

• 通过 inject 选项指定需要注入的数据，可以从父组件中接收到共享的数据。

<!-- Child.vue -->
<template>
    <div class="bd">
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
        <Child5 />
    </div>
</template>

<script setup>
import { ref, inject } from 'vue';

const list = inject('list');
</script>

父子组件通信（provide/inject）优点和缺点：

优点：

• 跨层级通信：  provide/inject 可以方便地实现祖先组件向后代组件的数据传递，解决了跨层级通信问题。

• 灵活性：  provide/inject 不限制数据的传递方式，提供了一种灵活的组件通信机制。

• 减少嵌套组件的复杂性：  在多层嵌套的组件结构中，provide/inject 可以简化数据传递流程，减少了 props 的层层传递。

缺点：

• 耦合性增加：  使用 provide/inject 可能会增加组件之间的耦合性，降低了组件的独立性和复用性。

• 可读性较差：  在子组件中使用 inject 注入的数据需要在组件选项中指定，可读性相对较差，不如 props 直观。

以上就是常见的5种Vue组件通信方式总结的详细内容，更多关于Vue组件通信方式的资料请关注3672js教程其它相关文章！

您可能感兴趣的文章:

• vue3父子组件通信、兄弟组件实时通信方式
• Vue3中组件数据通信方式总结
• Vue3父子组件间传参通信的四种方式
• Vue3组件间的通信方式详解
• Vue组件通信传递数据的三种方式