首页 > 资讯 > 前端开发 > JavaScript >Vue组件间通信方式全面汇总介绍

848

分享到

Vue组件间通信方式全面汇总介绍

Vue通信方式 Vue组件通信方式 2023-05-16 14:05:20 848人浏览八月长安

摘要

目录一、组件间通信最基本方式-props二、组件间通信-Vue自定义事件三、组件间通信-事件总线四、组件间通信-v-model五、组件间通信-sync属性修饰符六、组件间通信-$at

一、组件间通信最基本方式-props
二、组件间通信-Vue自定义事件
三、组件间通信-事件总线
四、组件间通信-v-model
五、组件间通信-sync属性修饰符
六、组件间通信-$attrs与$listeners
七、组件间通信-$children与$parent
八、组件间通信-provide与inject
九、组件间通信-vuex

一、组件间通信最基本方式-props

props是在父组件中传递给子组件的数据，子组件可以通过props接收这些数据并进行渲染或操作。在父组件中，通过在子组件标签上绑定属性并传递相应的值来传递数据。在子组件中，需要在props选项中声明接收哪些属性，并在组件中使用这些属性。

代码示例：

在父组件中，可以这样传递数据给子组件：

<template>
  <child-component :message="message" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在子组件中，需要在props选项中声明message属性，并使用这个属性：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

二、组件间通信-vue自定义事件

除了通过props进行父子组件之间的通信，Vue还提供了一种更加灵活的组件间通信方式，即自定义事件。通过自定义事件，可以让子组件向父组件发送消息，也可以让任意两个组件之间进行通信。自定义事件的实现依赖于Vue实例中的事件系统，即$emit和$on方法。在子组件中，使用$emit方法触发一个自定义事件，并传递需要传递的数据。在父组件中，使用$on方法监听这个自定义事件，并在回调函数中获取传递的数据。

代码示例：

在子组件中，可以这样触发一个自定义事件：

<template>
  <button @click="sendMessage">发送消息</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World!');
    }
  }
}
</script>

在父组件中，可以这样监听这个自定义事件：

<template>
  <child-component @message="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

三、组件间通信-事件总线

事件总线是一个Vue实例，可以用来在任意两个组件之间进行通信。事件总线可以通过Vue的全局事件机制来实现，即使用$emit方法触发一个全局事件，然后在需要监听这个事件的组件中使用$on方法进行监听。

在Vue应用程序中，可以创建一个全局事件总线，使得所有组件都可以通过这个事件总线进行通信。

代码示例：

可以在一个单独的javascript文件中创建一个全局事件总线：

import Vue from 'vue';
export const eventBus = new Vue();

然后，在任意需要进行通信的组件中，可以使用事件总线来发送和接收消息。

在组件A中，可以使用事件总线来发送一个消息：

import { eventBus } from './event-bus.js';
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello World!');
    }
  }
}

在组件B中，可以使用事件总线来监听这个消息：

import { eventBus } from './event-bus.js';
export default {
  created() {
    eventBus.$on('message', message => {
      console.log(message);
    });
  }
}

这样，组件A就可以向组件B发送消息，并且组件B可以在监听到这个消息后进行相应的操作。需要注意的是，事件总线是一个全局实例，因此在多人开发的情况下，可能会出现命名冲突的问题。可以在命名事件总线实例时加上项目前缀来避免这个问题。

四、组件间通信-v-model

v-model是Vue提供的一个用于双向绑定的指令，它可以方便地在父组件和子组件之间进行双向数据绑定。通常情况下，在一个子组件中使用v-model指令时，它会自动将value作为prop和input事件绑定。父组件可以通过v-model指令来将子组件中的value属性绑定到父组件中的一个变量上，并且当父组件中的这个变量发生变化时，子组件中的value属性也会相应地更新。

代码示例：

在一个简单的自定义输入框组件中，可以这样定义v-model：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

这个组件接收一个value属性，并在输入框中将这个属性作为输入框的值。在输入框中输入内容时，它会触发一个input事件，并将输入框中的值作为参数传递给父组件。父组件可以通过v-model指令来将这个value属性与父组件中的一个变量进行绑定：

<template>
  <custom-input v-model="message" />
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，父组件中的message变量会与子组件中的value属性进行双向绑定，因此当在子组件中输入内容时，父组件中的message变量也会相应地更新。同时，当父组件中的message变量发生变化时，子组件中的value属性也会相应地更新。

需要注意的是，v-model实际上是语法糖，它只是将组件的prop和事件进行了简写。如果需要更细粒度的控制，也可以手动绑定prop和事件来进行双向绑定。

五、组件间通信-sync属性修饰符

sync是Vue提供的一个属性修饰符，它可以方便地实现子组件向父组件传递数据并保持同步更新。它实际上是一种简写形式，用于简化使用v-bind和$emit手动实现双向绑定的代码量。

sync属性修饰符可以被用于一个子组件的props上，表示将父组件中的一个变量与该prop进行双向绑定。在子组件中，sync属性修饰符会自动将该prop作为一个update事件发送回父组件，以便父组件能够相应地更新变量的值。

代码示例：

在一个简单的自定义输入框组件中，可以使用sync属性修饰符来将输入框中的值与父组件中的一个变量进行双向绑定：

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

这个组件接收一个value属性，并在输入框中将这个属性作为输入框的值。在输入框中输入内容时，它会触发一个input事件，并将输入框中的值作为参数传递给父组件。通过使用sync属性修饰符，可以在父组件中将这个value属性与一个变量进行双向绑定：

<template>
  <custom-input :value.sync="message" />
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，sync属性修饰符会自动将子组件中的value属性与父组件中的message变量进行双向绑定。当在子组件中输入内容时，会触发一个update:value事件，将输入框中的值作为参数传递给父组件中的message变量。同时，当父组件中的message变量发生变化时，也会自动更新子组件中的value属性。

需要注意的是，sync属性修饰符仅仅是一种语法糖，它实际上是使用v-bind和$emit手动实现双向绑定的简写形式。如果需要更细粒度的控制，也可以手动绑定prop和事件来进行双向绑定。

六、组件间通信-$attrs与$listeners

在Vue组件开发中，有时候需要在组件之间传递一些未被声明为prop的数据或监听父组件的事件，这时候可以使用Vue提供的$attrs和$listeners特殊属性来实现。

$attrs属性是一个对象，包含了父组件传递给子组件但在子组件中未被声明的属性。可以通过v-bind="$attrs"将这些属性传递给子组件内部的DOM元素或其他组件。

代码示例：

<template>
  <div>
    <input v-bind="$attrs" />
    <!-- 或者 -->
    <custom-component v-bind="$attrs" />
  </div>
</template>
<script>
export default {
  inheritAttrs: false // 禁用特性继承
}
</script>

需要注意的是，如果组件继承了父组件的特性，例如class、style等，那么这些特性也会被包含在$attrs属性中，需要通过将inheritAttrs设置为false来禁用特性继承。

$listeners属性是一个对象，包含了父组件绑定在当前组件上的所有事件监听器。可以通过v-on="$listeners"将这些事件监听器绑定到子组件内部的DOM元素或其他组件上。例如：

<template>
  <div v-on="$listeners">
    <input />
    <!-- 或者 -->
    <custom-component v-on="$listeners" />
  </div>
</template>

需要注意的是，当使用$listeners属性时，只有自定义事件才会被绑定到子组件内部的DOM元素或其他组件上，原生事件不会。因此，如果需要监听原生事件，还需要手动将事件绑定到相应的DOM元素或组件上。

使用$attrs和$listeners可以方便地实现组件之间的通信，同时也能保证组件的封装性和复用性。

七、组件间通信-$children与$parent

在Vue组件开发中，$children和$parent是两个特殊的属性，可以用于实现组件之间的通信。但需要注意的是，使用这些属性并不是Vue官方推荐的通信方式，因为它们具有一定的局限性和风险，容易引起耦合和不可预测的问题。

$children属性是一个数组，包含了当前组件的所有子组件实例。可以通过遍历$children数组来访问子组件的属性和方法。

代码示例：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 访问子组件实例的属性和方法
    console.log(this.$children[0].childProp)
    this.$children[0].childMethod()
    // 通过ref访问子组件实例
    console.log(this.$refs.child.childProp)
    this.$refs.child.childMethod()
  }
}
</script>

需要注意的是，$children数组是不稳定的，它的顺序可能会受到组件渲染顺序的影响。因此，不建议在$children数组中使用索引来访问子组件，而应该通过ref属性来访问子组件实例。

$parent属性是当前组件的父组件实例。可以通过$parent属性访问父组件的属性和方法。例如：

<template>
  <div>
    <button v-on:click="parentMethod">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  methods: {
    parentMethod() {
      // 访问父组件实例的属性和方法
      console.log(this.$parent.parentProp)
      this.$parent.parentMethod()
    }
  }
}
</script>

需要注意的是，$parent属性只能访问当前组件的直接父组件实例，不能访问更高层次的父组件实例。因此，如果需要在嵌套层次较深的组件之间通信，建议使用Vuex或事件总线等官方推荐的通信方式。

八、组件间通信-provide与inject

Vue提供了一种比较高级的组件通信方式——provide和inject，它可以实现祖先组件向后代组件传递数据，而无需一层层地传递props或者事件。

provide和inject是Vue中两个成对出现的选项，provide选项用于向后代组件提供数据，而inject选项用于在后代组件中注入数据。需要注意的是，只有通过inject选项注入的数据才是响应式的，而通过props传递的数据是只读的。

在父组件中使用provide选项提供数据，例如：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  provide: {
    message: 'hello world'
  }
}
</script>

在子组件中使用inject选项注入数据，例如：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

在子组件中使用inject选项注入数据时，可以将其定义为一个数组，数组的每个元素是需要注入的数据的key值。例如：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message', 'otherData']
}
</script>

需要注意的是，provide和inject选项主要用于高阶组件库和插件开发，一般情况下不推荐在业务组件中使用，因为它会增加组件之间的耦合性，并且不太符合Vue的“单向数据流”思想。如果需要在业务组件中实现组件之间的通信，建议使用Vuex或事件总线等官方推荐的通信方式。

九、组件间通信-vuex

Vuex是Vue的官方状态管理库，它提供了一种集中式存储管理应用所有组件的状态的方法。通过Vuex，我们可以将应用程序的状态从组件中提取出来，集中在一个容器中进行管理，使得组件之间的数据共享更加简单可控。

Vuex包含了以下几个核心概念：

state: 存储应用程序状态的对象，也就是所有组件共享的数据。
mutations: 用于修改state的方法，必须是同步函数，可以记录所有修改state的操作。
actions: 用于处理异步操作和复杂的逻辑，可以包含多个mutation。
getters: 类似于Vue组件中的计算属性，可以通过state派生出一些新的状态，以便在多个组件中共享。

下面是一个简单的Vuex示例，以计数器为例：

在store.js中定义Vuex的store：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 0
}
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}
const actions = {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
const getters = {
  doubleCount (state) {
    return state.count * 2
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

在App.vue组件中使用store中的数据：

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.commit('decrement')">Decrement</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}
</script>

在子组件中也可以使用Vuex中的数据和方法，例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}
</script>

需要注意的是，Vuex在处理大型应用程序时非常有用，但在处理小型应用程序时，可能会增加额外的复杂性和开销。因此，当应用程序比较简单时，可以选择其他的组件通信方式，例如props、事件总线、自定义事件等。

到此这篇关于Vue组件间通信方式全面汇总介绍的文章就介绍到这了,更多相关Vue通信方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue组件间通信方式全面汇总介绍

本文链接: https://www.lsjlt.com/news/210017.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue组件间通信方式全面汇总介绍

目录一、组件间通信最基本方式-props二、组件间通信-vue自定义事件三、组件间通信-事件总线四、组件间通信-v-model五、组件间通信-sync属性修饰符六、组件间通信-$at...

99+

2023-05-16

Vue通信方式 Vue组件通信方式
vue组件间的通信,子组件向父组件传值的方式汇总

目录一、子组件通过this.$emit()的方式将值传递给父组件二、通过vuex来传递组件间的数据三、通过中央总线来传递组件间的数据四、通过修改父组件传过来的对象属性五、父组件使用子...

99+

2023-03-20

vue组件通信 vue子组件 vue父组件传值
Vue父子组件通信全面详细介绍

目录1.Vue父子组件通信方式2.不同文件间的通信方式1 .父组件vue文件和子组件vue文件2 .父组件jsx文件和子组件vue文件3 .父组件vue文件和子组件jsx文件4 .父...

99+

2022-11-13

vue的父子组件通信 vue父子组件通信例子
vue组件间通信全面讲解

目录前言组件介绍一、父传子1. 父组件通过 props 传递数据给子组件2. 定义props的类型和默认值二、子传父子组件通过 $emit 传递数据给父组件三、非父子组件间数据传递1...

99+

2022-11-13
Vue组件间的通信方式详析

目录前言组件之间通信的场景父子组件之间的通信父组件通过 prop 向子组件传递数据子组件通过自定义事件向父组件传递数据兄弟组件之间的通信状态提升隔代组件之间的通信attrs/attr...

99+

2022-11-13
Vue组件间通信方式是什么

这篇文章将为大家详细讲解有关Vue组件间通信方式是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。通信方式：1、用props通信；2、用“$emit”通信；3、用ref通信；4、用EventBus通信；...

99+

2023-06-29
vue组件之间通信方式有哪些

这篇文章将为大家详细讲解有关vue组件之间通信方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体如下：对于vue来说，组件之间的消息传递是非常重要的，下面是我对...

99+

2022-10-19
Vue组件间通信有哪几种方式

这篇文章将为大家详细讲解有关Vue组件间通信有哪几种方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Vue 组件间通信有哪几种方式？Vue 组件间通信是面试常考的知识点...

99+

2022-10-19
Vue组件之间的通信方式(推荐!)

目录一、组件间通信的概念二、组件间通信解决了什么二、组件间通信的分类三、组件间通信的方案props传递数据$emit 触发自定义事件refEventBusparent或parent ...

99+

2022-11-13
Vue如何实现组件间通信方式

这篇文章主要介绍了Vue如何实现组件间通信方式，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。props父组件可以通过props向下传递数据给子组件静态的Props通过为子组件...

99+

2023-06-29
Vue组件之间四种通信方式详解

目录前言父子组件通信父组件与子孙组件的通信父组件获取子组件数据无需考虑组件关系的通信前言 vue 框架提供了前端开发组件的思想，可以通过组件来组合成一个完整的页面，都是随着组...

99+

2022-11-12
Vue组件之间的通信方式是什么

本篇内容介绍了“Vue组件之间的通信方式是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、组件间通信的概念开始之前，我们把组件间通信这...

99+

2023-07-02
Vue实现组件间通信的方式有哪些

本篇内容主要讲解“Vue实现组件间通信的方式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue实现组件间通信的方式有哪些”吧!1、Props 父 >>> 子&...

99+

2023-06-25
Vue组件间怎么通信？六种方式浅析

Vue组件间怎么通信？下面本篇文章给大家介绍一下Vue组件通信的六种方式，希望对大家有所帮助！组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有几种关系.针对...

99+

2023-05-14

组件通信前端 Vue.js
一起来学习Vue的组件间通信方式

props 父组件可以通过props向下传递数据给子组件静态的Props 通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的动态Props 在模版中要动态的绑定父组件的...

99+

2022-11-13
Vue组件之间的通信方式详细讲解

目录前言一、父级传数据给子级1、传输固定的具体数据2、动态语法3、子组件调用父组件二、子级传数据给父级1、使用自定义事件2、$refs的使用3、同级别组价以及任意组件之间的数据传递前...

99+

2022-11-13
vue中实现组件间通信的方式有哪些

这篇文章给大家介绍vue中实现组件间通信的方式有哪些，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。方法一、 props / $emit父组件A通过props的方式向子组件B传递，B t...

99+

2022-10-19
Vue非父子组件之间的通信方式详解

目录非父子组件的通信1.Provide和Inject1.1基本使用1.2处理响应式数据(了解)2.全局事件总线总结非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信...

99+

2022-11-13
vue组件间的通信,子组件向父组件传值的方式是什么

今天小编给大家分享一下vue组件间的通信,子组件向父组件传值的方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、子...

99+

2023-07-05
Vue实现组件间通信的几种方式(多种场景)

目录1、Props 父 >>> 子（Props）子 >>> 父（$emit）2、Bus事件总线3、V...

99+

2022-11-12