0
点赞
收藏
分享

微信扫一扫

vue父子组件传值

写心之所想 2022-04-24 阅读 133
前端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文件):
请添加图片描述

举报

相关推荐

0 条评论