vue数据传递方式总结

2024-02-27 18:05:57

目录

1、vue数据传递介绍

  在vue中，数据处理与传递是每个开发者要面对的事情，学习正确使用各种数据处理方式同时，我们可以跟进一步学习数据高效的传递方式，以下介绍vue2.x中常用的几种数据处理用到的方法；

2、常用方式

常用的数据处理分以下几种情况：

  • 父组件传子组件
  • 子组件传父组件
  • 兄弟组件通信
  • 路由通信（页面传值）
  • 全局通信
    针对以上几种情况，vue都有对应的方式完成数据传递，emit，props以及索引实现父子组件通信，兄弟组件可用bus方式通信，路由之间使用router中query和params方式通信，vuex用于状态管理等。vue数据通信见下图：
    vue数据传递方式总结

2.1 浏览器原生方法

  sessoin是浏览器原生存取数据方法，常用于全局数据的存储与使用。通常有***sessionStorage、localStorage***两种方式，基本用法相同，用法如下：

// 将数据放入缓存sessionStorage
sessionStorage.setItem('key', 'value');
 
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
 
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
 
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

// 将数据放入缓存localStorage
localStorage.setItem('key', 'value');
 
// 从localStorage获取数据
var data = localStorage.getItem('key');
 
// 从localStorage删除保存的数据
localStorage.removeItem('key');
 
// 从localStorage删除所有保存的数据
localStorage.clear();

  两种存放数据方式生命周期不同，localStorage在生命周期以内在数据被手动清理之前，数据都可以存取；而sessionStorage 刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

2.2 emit，props父子传值

  1. props用法

props：父组件向子组件传递数据；子组件通过props声明需要从父组件接收的数据。props除了可以传递变量以外，还可以传递方法以及对接收的数据进行数据验证；代码如下：
父组件传值：

<template>
  <div>
  	<!-- 使用子组件，title为传递到子组件参数 -->
    <title-bar :title="title" @goBack="goback"></title-bar>
  </div>
</template>
<script>
// 引入组件
import TitleBar from "@/components/TitleBar";
export default {
  components: {
    TitleBar, //组件引入  
  },
  data() {
    return {
      title: "标题",
    };
  },
}

子组件接收值：
  子组件接收值的同时，可以在props内进行数据验证以及设置默认值，如下代码所示，子组件接收父组件传递过来的title值。

  props: {
    // 标题
    title: {
      type: String, //规定数据类型
      default: "标题" //默认值
    },
  }
  1. emit用法
      在子组件中使用$emit来触发事件，父组件中使用$on来监听子组件事件；如上父组件代码中，goback就是父组件监听的子组件事件，在子组件中使用方法如下：
methods: {
    // 触发返回方法
    goBack() {
      this.$emit("go-back");
    }
  }

同时该方法还可以实现子组件给父组件传值，在emit中声明要传递的参数，然后在父组件中接收参数。代码如下：

//子组件中使用emit触发事件，并带参数5
clickhandle() {
   //使用emit，第一个参数为子组件组件方法，第二个参数为该方法传递的参数
   this.$emit("clickhandle", 5);
 }
 //父组件中，引入组件，绑定事件
<!-- 引入组件，绑定事件changeCounter -->
 <t-button @clickhandle="changeCounter"></t-button>
 // methods中， 绑定该方法并接受子组件传递过来的参数data
 changeCounter(data) {
   this.counter = data;
 },

注：**emit和props都可以传递方法，但是两者本质是不同的，**具体区别参见使用vue父组件与子组件方法传递emit与props区别；

2.3 索引

  vue使用"$"来引用实例时，这种引用我们称之为索引。通过索引我们可以实现父组件访问子组件实例，也可以实现子组件访问父组件，使用索引可以进行递归向上或者向*问，一直到最底层或者根实例。索引分以下几种：

  • this.$parent:子组件访问父组件实例时使用（不推荐使用，推荐使用props）；
  • this.$children:父组件访问所有子组件实例时使用；
  • this.$ref:父组件访问指定名称子组件实例时使用。

  以第三种ref为例，访问一个实例可以访问一个组件里面所有的方法和声明的数据；使用方法如下代码：

<template>
  <div>
    <component-a ref="comA"></component-a>
  </div>
</template>
<script>
import ComponentA from "./components/ComponentA ";
export default {
  components: {
    ComponentA 
  },
  created() {
	//created时无法取到子组件实例值，此时子组件未完成实例化
  },
  methods: {
    getComAMsg() {
    	let msg = this.$refs.comA.msg; // 取子组件值
    }
  }
};
</script>

“this.$refs.comA.msg”：这里使用refs.comA访问ref名字为comA的组件内值。父组件访问子组件时需要注意生命周期，在子组件实例化完成后才可以访问到子组件值，否则会报错。

2.4 router传参

  当我们上一个页面要跳转下一个页面时需要带参数，可以使用路由带参，对于不同的路由访问方式，传参方式不同；

  1. 使用path跳转时，路由传参通过query方式；
  2. 使用name跳转时，路由传参通过params’方式；

这里的path和name都是我们路由文件对应的键值；如下：

 {
    path: "/productList",
    name: "productList",
    component: () => import("@/views/productList/index.vue")
  },

使用path和name路由传参代码如下：

  1. path路由传参
// path跳转对应query方式传参
this.$router.push({
 path: '/routerJump',
  query: {
    name: 'sam', 
    stuNo: '1234'
  }
})

在下一个页面取参：

// 使用query取参
this.stuNo = this.$route.query.stuNo；
  1. name路由传参
// // name跳转对应params方式传参
this.$router.push({
 name: 'routerJump',
  params: {
    name: 'sam', 
    stuNo: '1234'
  }
})

在下一个页面取参:

// 使用params取参
this.stuNo = this.$route.params.stuNo；

注意，取参的时候使用的$route中的route是没有“r”的。

2.5 bus总线

  bus是vue中的*事件总线，通常用来兄弟组件间通信，若需要考虑兄弟组件之间通信的时效性的话，使用bus总线即轻量，又可以解决效率问题。
  通常我们若在项目中使用bus，都会声明一个工具文件，专门用来使用bus通信，一个项目一个文件就可以，bus使用方法如下：

  1. 在项目中创建公共文件
    在util文件夹下创建bus.js文件，文件内容如下：
import Vue from "vue";

const Bus = new Vue();

export default Bus;
  1. 传递参数
    监听需要通信的组件，引入bus，传递参数，代码如下：
// 监听电话号码的变化，每次变化使用emit触发传参
setTelNo() {
   Bus.$emit("mobNo", this.mobNo);
 }
  1. 监听需要通信的组件，接收参数
    监听需要通信的组件，引入bus，接收参数
// 接收参数
Bus.$on("mobNo", telNo => {
  // 输出兄弟组件传递的内容
  this.mobNo = telNo；
});

2.6 vuex

  vuex被称之为状态管理，解决的问题与bus类似，监听某个值变化并实施更新相应组件值；与bus不同的是vuex一般用于复杂的场景，作用域是监听某一个值改变整个项目相关组件的状态。对于小型项目使用bus即可解决绝大多数问题。
  关于vuex的使用，分为四部：

  1. 安装vuex
  2. main.js全局引入
  3. 存储监听的变量
  4. 事件响应
    具体使用方法我们开一个专题进行讨论，后续推出再进行更新，欢迎探讨。

3、总结

  vue主要处理视图和数据两层，我们这里已经介绍了常用的数据通信方式，基本的技能是可以熟练运用这些方式进行数据处理，进阶的学习还需要更深一步学习，如学习如何高效处理数据以及数据安全方面。希望对各位有所帮助，有不足的地方希望能指出，共同学习进步。

上一篇：vue组件间传值


下一篇：串口数据监视-Bus Hound