vue父子组件传值

父组件引用子组件

首先在父组件里引用子组件：（图1）

如上图，以子组件为例。图1为父组件内容。

子组件内：

引用并注册子组件

首先import组件

import StepForm from "@/views/cjdp/alarm/configuration/stepform/stepform";

然后再components属性里面注册此组件，如图1。注册名应与import后的名字一致–StepForm

如此，即可在父组件中使用此子组件。用法： 放在相应位置即可展示子组件内容。

父组件与子组件之间传值

父组件获取子组件里的data里定义的对象的值

首先，子标签里要加上ref

<StepForm ref="stepFormVue"></StepForm>

父组件里获取stepform子组件里的flag的值：

this.$refs.stepFormVue.flag

父组件调用子组件里的方法

this.$refs.stepFormVue.stepFunction()

子组件使用父组件的数据（父组件传值给子组件）

<StepForm ref="stepFormVue" :stepForm.sync="stepForm"></StepForm>

(.sync表示在子组件内可以修改stepForm的值)

在子组件内的props内加上stepForm相关信息：

子组件修改父组件的对象的值

this.$emit("update:stepForm",newStepForm)
//将stepForm更新为newStepForm

子组件调用父组件里的方法

this.$emit("fatherFunctionName",value)
//fatherFunctionName为父组件方法的方法名，value为方法所需的参数

Bus传值

首先写一个bus的js文件，内容为：

子组件引用这个js文件，然后：

父组件获取ruleFormFlag的值（父组件也需要引入bus.js文件）：