博客
关于我
组件通信大全
阅读量:338 次
发布时间:2019-03-04

本文共 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/

你可能感兴趣的文章
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>
MySQL Connector/Net 句柄泄露
查看>>
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
mutiplemap 总结
查看>>
MySQL Error Handling in Stored Procedures---转载
查看>>
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>