本文共 2976 字，大约阅读时间需要 9 分钟。

简单介绍

父组件：当组件A中嵌套一个组件B时，组件A即为父组件

子组件：当组件A中嵌套一个组件B时，组件B即为子组件 兄弟组件：当组件C中嵌套了两个子组件，组件D和组件E；且组件D和组件E并不存在嵌套关系时，可以称组件D和组件E为兄弟组件

父组件传值给子组件

方式一：

父组件 EditCase.vue

子组件 AddAndEditForm.vue

在子组件中使用props接收父组件传递的值，props中存在的变量无需再次在data中声明，可直接使用。使用方式：this.props中变量名。 props中变量与data中声明的变量区别： 原则上props中的变量只可读，不可更改（不可写）；data中的变量可读可写。

方式二：

使用ref和$refs，父组件和子组件代码同方式一。其中，addAndEditFormObj代表自定义的子组件对象（名称随意）；

接下来，还是在父组件中使用$refs；

• 父组件调用子组件中方法的使用格式：
  this.$refs.自定义的子组件对象.子组件的methods中的某一方法;
• 父组件给子组件中变量赋值的使用格式：
  this.$refs.自定义的子组件对象.子组件的data中的某一变量 = 父组件中的某个值;

showDrawer() {                console.log("编辑页面rowRecord："+JSON.stringify(this.rowRecord))                this.$refs.addAndEditFormObj.rowRecord = this.rowRecord;                this.$refs.addAndEditFormObj.showDrawer();                //flag=1 代表添加 flag=2 代表更新/编辑 flag=3 代表添加                this.$refs.addAndEditFormObj.flag = 2;            },

子组件传值给父组件

父组件 同上（截取代码片段）

   ##methods中自定义一个监听事件的方法，方法名称同子组件中的@childCaseFormEdit="childCaseFormEdit"。##注意：=前后的名称必须一致childCaseFormEdit(flag)  {    	console.log("编辑用例页")  }

子组件 同上（截取代码片段）

在子组件需要向父组件传递值的位置使用this.$emit(‘方法名’，参数)

##methods中的方法 updateNewManualCaseAndStep(formData){      console.log("formData: "+JSON.stringify(formData))      var _this = this      this.axios            .post('/api/manualcase/updateManualCaseAndStep', formData)            .then(function (response) {               console.log(response.data)               _this.$emit('childCaseFormEdit', true)            });    },

非父子组件间的传值

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

公共bus.js

//bus.jsimport Vue from 'vue'export default new Vue()

组件A: child1.vue

B组件：child2.vue

参考链接：

转载地址：http://wqtii.baihongyu.com/