Vue组件间多种通信方式(超详细)

目录

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

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

三、组件间通信3: 事件总线

四、组件间通信4: v-model

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

六、.组件间通信6: $attrs与$listeners

七、组件间通信7: $children与$parent

八、组件间通信8: provide与inject

九、组件间通信9: vuex



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

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

代码示例:

        在父组件中,可以这样传递数据给子组件:




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




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

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

代码示例:

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




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




三、组件间通信3: 事件总线

        事件总线是一个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可以在监听到这个消息后进行相应的操作。需要注意的是,事件总线是一个全局实例,因此在多人开发的情况下,可能会出现命名冲突的问题。可以在命名事件总线实例时加上项目前缀来避免这个问题。

四、组件间通信4: v-model

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

代码示例:

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




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




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

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

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

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

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

代码示例:

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




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




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

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

六、.组件间通信6: $attrs与$listeners

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

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

代码示例:

        




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

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


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

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

七、组件间通信7: $children与$parent

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

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




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

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




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

八、组件间通信8: provide与inject

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

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

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




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




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




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

九、组件间通信9: 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中的数据:




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




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

你可能感兴趣的:(vue.js,前端,javascript)