vue 跨组件数据传递,vue传递数组到后端
本文主要介绍vue如何实现跨页投递、接收数组、赋值，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
跨页面传递和接收数组并赋值。1.界面A:问题-编辑2。界面B:添加问题数组，为阶梯状凹坑赋值
跨页面传递与接收数组并赋值
为了更好的理解，以自己的项目为例，附上动画效果。您可以看到从第一行数据中选择的一行被分配给另一个接口。为了更好地理解，我将向您介绍每个接口和方法属性的名称：
兄弟界面跳转：问题-编辑——添加-问题
1.界面A：question-edit
如果你想给这一行的数据赋值，你需要数组，因为它们不是一个数组。把它们打包。首先，第一步是我们的条目在操作的编辑图标上。
1.编辑图标代码：
模板槽-范围=“范围”
El-button @ click= add question(scope . row) type= text size= small icon= El-icon-edit /El-button
/模板
在事件中点击addQuestion是一个自定义的接口跳转方法。在确认该行携带的数据添加到模板槽后，将(scope.row)添加到jump方法中。
2.方法addQuestion
添加问题(行){
this.carryCurrentRowCode=row
这个。$router.push({
路径：“添加问题”，
//查询：this.carryCurrentRowCode
查询：{
carryCurrentRowCode:this . carryCurrentRowCode
}
});
},
跳转功能的实现主要是path的功能：‘add-question’。
关于界面跳转的详细内容，可以了解详细文章：https://www.jb51.net/article/245670.htm
注意：注释中有一行无法实现，使用下面带括号的一行。
carrycurrenturocode下面：这个。carrycurrenturocode
前面一个是接收接口用的接收阵列。我在这里给它们起了相同的名字，但是它们实际上可以前后不同。
3.carryCurrentRowCod是一组定义
导出默认值{
data() {
返回{
//点击编辑，携带当前行的参数数组。
carryCurrentRowCode: {
问题类型Id: ，
连续： ，
questionClassifyId:“”，
问题内容： ，
degreeInitial:“”
},
}
数组中的括号是带有的组件的数据。在括号中添加要携带的数据。
2.界面B：add-question
1.接受传递的数组。
导出默认值{
data() {
返回{
//传递的数组
carryCurrentRowCode: {}
};
2.因为数组一加载到接口中就显示出来，所以钩子函数必须在传递的数组方法中卸载，并将值赋给相应的组件。
已创建(){
//从问题编辑界面接收到carryCurrentRowCode数组
this.carryCurrentRowCode=this。$ route . query . carrycurrentrowcode；
}
3.获取传递的数组。专门为组件赋值。举个例子：serial:“”以测试号为例，
//测试编号
this . I _ number=this . carrycurrentrowcode . serial；
将赋值也写入钩子函数。
解释识别号
是组件El-输入测试编号v-model=i_number
注意：
如果不命名兄弟接收接口，可以减少这个组件的赋值步骤，直接在组件的v模型中等于接收数组点串行。
数组赋值踩过的坑
最近需要完成Vue中的动态赋值数组操作。我们从服务器获取数据后，刷新数组中的数据，却发现无论用什么方法都做不到。通过键入log，我们发现数据在这里无法执行，并且我们没有报告任何异常。最后问题解决了，这里做个记录。
Vue中的数组赋值和在普通的JS中赋值还是有所区别。
以下操作会导致界面刷新：推送、弹出、取消移位、移位、反转、排序、拼接。
以下操作不会导致界面刷新：切片、串联、过滤
还有一点需要注意：
不能通过直接赋值或者改变长度来刷新界面。
(1)直接按指标设置项目。
(2)修改数组长度，mylist.length=3
其次，从服务器获取数据后赋值有一个问题需要注意：主客体的变化。
比如在使用axios对象发起请求后，在返回方法中处理数据需要注意：
注意，调用axios的then方法中的对象时不能使用这个对象，因为这个对象此时引用的是axios实例，所以vue实例中的数据不能通过这个获取。用一个值指向外界的vue实例对象，并通过这个外部对象赋值，这是正确的。
var自我；
已创建：函数(){
自我=这个；
},
mouted:function(){
axios.create({
base URL:“URL”，
超时：10000，
标头：{ Content-Type : application/JSON }
}).获取(
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。