组件通信大全-白红宇

组件通信大全

阅读量：338 次

发布时间：2019-03-04

本文共 3092 字，大约阅读时间需要 10 分钟。

Vue.js 组件间数据传值与状态管理技术探索

在 Vue.js 开发中，组件实例之间的数据传递是实现复杂 UI 交互的关键环节。本文将详细探讨不同场景下的数据传递方法，包括父子组件、兄弟组件、全局状态管理等多种实践技巧。

1. 组件间的数据传递基本原则

Vue.js 组件实例具有独立的作用域，彼此之间无法直接访问对方的数据。因此，数据传递需要通过特定的方法实现，主要有以下几种方式：

2. 父子组件间的数据传递

2.1 父组件传递数据给子组件

在父组件中，可以通过在子组件的 props 属性中定义接收的数据类型。具体方法如下：

// 父组件

// 子组件

2.2 子组件传递数据给父组件

通过定义自定义事件，可以实现子组件对父组件的数据更新。例如：

// 父组件

// 子组件

3. 兄弟组件间的数据传递

由于组件实例之间无法直接访问对方的数据，实现兄弟组件间的数据传递通常需要借助事件总线（Event Bus）实现。具体方法如下：

3.1 使用事件总线

首先创建一个事件总线实例，通常会放在一个专门的文件中，如 eventBus.js：

import Vue from 'vue'
Vue.prototype.eventBus = new Vue()

然后，在需要传递数据的组件中使用事件总线：

// 传数据的组件
methods: {
  changeSize() {
    this.eventBus.$emit('add', this.arg)
  }
}
// 接收数据的组件
created() {
  this.eventBus.$on('add', (message) => {
    console.log(message)
  })
}

3.2 不借助事件总线的传递

在某些情况下，可以通过直接在父组件中定义一个空的 Vue 实例作为事件总线：

const eventBus = new Vue()
Vue.prototype.eventBus = eventBus

然后在需要传递数据的组件中使用：

import '@/eventBus.js'
// 在方法中定义：
changesize() {
  this.eventBus.$emit('add', this.arg)
}

4. Vue 组件间的状态管理

4.1 使用 Vuex

Vuex 提供了一个集中化的状态管理解决方案，适用于多个组件间的状态同步。以下是 Vuex 的基本使用方法：

4.1.1 创建 Vuex Store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    name: 'jing',
    age: 18,
    look: 'beautiful'
  },
  mutations: {},
  actions: {}
})

4.1.2 在组件中使用

// 组件一

5. ref 和 $refs

ref 是用于访问 DOM 元素或 Vue 组件实例的工具，主要用于父组件与子组件之间的互动。

5.1 父组件引用子组件

5.2 子组件方法调用

methods: {
  hide() {
    this.show = true
  }
}

5.3 父组件调用子组件方法

methods: {
  regis() {
    this.$refs.login.show()
  }
}

6. 本地存储

6.1 localStorage 和 sessionStorage

localStorage：持久化存储，适用于需要长期保存数据的情况。

sessionStorage：仅在当前浏览会话中有效，适用于同一页面内的数据传输。

示例：

// 保存数据
sessionStorage.setItem('key', 'value')
// 获取数据
let data = sessionStorage.getItem('key')
// 删除数据
sessionStorage.removeItem('key')
// 清除所有会话数据
sessionStorage.clear()

7. 路由传值

7.1 路由拼接

methods: {
  details(id) {
    this.$router.push({ path: `/particulars/${id}` })
  }
}

7.2 路由参数传递

methods: {
  insurance(id) {
    this.$router.push({ name: 'particulars', params: { id } })
  }
}

7.3 URL 查询参数

methods: {
  insurance(id) {
    this.$router.push({ path: '/particulars', query: { id } })
  }
}

8. 全局变量

8.1 创建全局变量

import Globble from './Globle.js'
Vue.prototype.$arr = Globble

8.2 组件使用

methods: {
  more() {
    let arr = []
    this.phone.forEach((item) => {
      if (!arr.includes(item.category_id)) {
        arr.push(item.category_id)
      }
    })
    this.$arr.arr = arr
    this.$router.push({ path: "/goods", query: { categoryID: arr } })
  }
}

9. $root、$parent、$children

$root：可以访问整个 Vue 应用的根实例。

$parent：访问父组件实例。

$children：访问当前组件的所有子组件数组。

示例：

const app = new Vue({
  el: '#app',
  data: {
    message: '你好'
  },
  components: {
    mxc: {
      template: '#mxc',
      methods: {
        btnClick() {
          console.log(this.$parent)
          console.log(this.$root.message)
        }
      }
    }
  }
})