Vue-跨页面传递与接收数组并赋值

为更好让大家理解拿自己的项目做例子并附上动图效果，可以看到将第一行数据选中的一行赋值到了另一个界面：为了更好让大家理解拿去附用将我每个界面和方法属性的命名都介绍给大家：

兄弟界面跳转：question-edit——>add-question

1.界面A：question-edit

想要将本行的数据赋值过去，因为不是一个所以要用到数组，将它们打包好，首先第一步我们的入口在操作的编辑图标上

1.编辑图标代码：

<template slot-scope="scope">
	<el-button @click="addQuestion(scope.row)" type="text" size="small" icon="el-icon-edit"></el-button>
</template>

点击事件中的addQuestion是自己定义的界面跳转方法。确定本行携带数据加入模板插槽后，在跳转方法中加入(scope.row)

2.方法addQuestion

	addQuestion(row) {
	      this.carryCurrentRowCode = row;
	      this.$router.push({
	        path: "add-question",
	        //query: this.carryCurrentRowCode
	        query: {
	          carryCurrentRowCode: this.carryCurrentRowCode
	        }
	      });
    },

跳转功能的实现主要是path: "add-question"起到的作用。界面跳转详情可以了解详细博客：

https://blog.csdn.net/weixin_39332529/article/details/106446334

注意：注释的一行不能实现，用下方带括号的。

下方carryCurrentRowCode: this.carryCurrentRowCode

前边的是接收界面用到的接收数组，我这里把他们名字命名一样了，实际前后可以不同。

3.carryCurrentRowCod是定义的数组

	export default {
	  data() {
	    return {
		//点击编辑 携带当前行的参数数组
		      carryCurrentRowCode: {
		        questionTypeId: "",
		        serial: "",
		        questionClassifyId: "",
		        questionContent: "",
		        degreeInitial: ""
		      },
}

数组中括号的是带的组件的数据。括号里加自己想携带的数据。

2.界面B：add-question

1.拿过传递过来的数组

	export default {
	  data() {
	    return {
		// 传递过的数组
		      carryCurrentRowCode: {}
    }；

2.因为拿过来的数组是在界面一加载就显示出来的，所以传递过来的数组方法和将值赋值到对应的组件中都要卸载钩子函数中

	created() {
	    // 从question-edit界面接收到carryCurrentRowCode数组
	    this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
    }

3.传递过来的数组是拿到了，具体将一个值赋值到组件中举一个例子：用试题编号举例serial: "",

		// 试题编号
    this.i_number = this.carryCurrentRowCode.serial;

同样将赋值写到钩子函数中。

解释i_number

是组件el-input试题编号v-model="i_number"

注意:

如果不是兄弟接收界面的命名命名好了，可以减少这个组件赋值步骤，直接在组件的v-model中等于接收数组点serial