Django+Vue+ElementUI父子组件参数传递?子组件数据变化兄弟组件实现联动?多个表单同时校验?内置事件添加自定义回调参数?等问题的解决办法

目录

前言：

问题列表：

1.父组件向子组件传递参数值

2.子组件向父组件传递参数值

3.子组件的值变化，触发其他子组件请求接口

4.同一个页面有多个表单进行同时验证

5.给elementui定义好的事件并且带默认参数的事件增加自定义参数

问题解决：

1.父组件向子组件传递参数值

2.子组件向父组件传递参数值

3.子组件的值变化，触发其他子组件请求接口

4.同一个页面有多个表单进行同时验证

5.给elementui定义好的事件并且带默认参数的事件增加自定义参数

---

前言：

  本笔记主要记录在前后端分离模式的开发过程中遇到的一些问题,以及对应的解决办法。

  包括了父子组件参数值传递、兄弟组件的跳转、同一个页面多个表单同时验证等问题。

   每个问题对应的解决思路以及解决办法会相对详细。尽可能让大家只看文字就能知道如何解决问题。而不像其他一些笔记，只给出部分代码，甚至直接照搬还用不起来或者不知道怎么使用。所以有对应问题的可以从目录直接跳转。

问题列表：

1.父组件向子组件传递参数值

2.子组件向父组件传递参数值

3.子组件的值变化，触发其他子组件请求接口

4.同一个页面有多个表单进行同时验证

5.给elementui定义好的事件并且带默认参数的事件增加自定义参数

问题解决：

1.父组件向子组件传递参数值

假设子组件:subView.vue

在子组件中，定义了组件名为subView,并且通过props参数绑定了两个变量,STUNAME、CLASSINFO。在template中,使用了这两个变量。

其中STUNAME属性为string，CLASSINFO属性为object对象

那么,怎么给这两个变量赋值呢？请往下看父组件的代码

<template>
  {
  { STUNAME }}
  {
  { CLASSINFO }}
</template>

<script>
  export default {
    name:"subView",
    props:{
      STUNAME: String,  // 学生姓名
      CLASSINFO: Object,  // 班级信息
    },
  }
</script>

父组件为:parentView.vue

<template>
  <subView :STUNAME="stuname" :CLASSINFO="classinfo"></subView>
</template>

<script>
import subView from '@/views/subView.vue'  //在父组件中引入子组件

export default {
  name:"parentView",
  components: {  
    subView,  // 在父组件中挂载子组件
  },
  data() {
    return {
      stuname:'123',
      classinfo:{"key":"4-1","value":"41"}
    };
  },
}
</script>

在父组件中࿰