本文共 3008 字，大约阅读时间需要 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)        }      }    }  }})

通过这些方法，开发者可以灵活地实现 Vue.js 组件间的数据传递和状态管理，选择最适合项目需求的实现方式。

转载地址：http://pjie.baihongyu.com/