1,子主件触发向父主件传值

子组件与父组件传值是通过在子组件中,定义$emit,向父组件发射一个事件,及带上传的值。父组件监听这个事件,然后调用这个事件的函数,传值是传到这个函数参数中的。

    this.$emit('changeActiveStep',3);

事件名:changeActiveStep
传值:3

具体如下:
场景是:app.vue中定义一个展示当前进度的变量,
这个值随着app.vue 中router-view跳转到component1,值表示为第1步,跳转到component2,值表示为第2步

实现为:

1,在app.vue中

<router-view @changeActiveStep="changeStep"></router-view>

定义事件changeActiveStep调用的函数changeStep

在app.vue中组件的methods中定义函数:

methods:{
    changeStep(val){
    this.active_step=val
    }
  }

当然,我们也可以在这个组件中data中定义active_step初始值:

 data(){
    return {
      active_step:2
    }

2,子组件中定义emit发射事件

    this.$emit('changeActiveStep',3);

因为我们跳转到某个component中就自动变化active_step值,所以,在跳转到的component中,我是在mounted中定义$emit调用的

以上基本实现,跳转到子组件,子组件改变父组件的值的功能

2,父主件主动取子组件值

父组件主动取子主件值,使用ref

调用子组件

     <subComp  :show-data="template_res" ref="child"/>

取值方式为:

      console.log("showData:",this.$refs.child.checked_showData)

另外一种写法中:

     <!-- <div v-for="(val,k,ind) in resp_data" :key="ind" >
      <ShowMonitoritems :title="check_titles[k]" :show-data="val" :ref="k"/>
     </div> -->

使用的**:ref**(加点的),因为k是v-for产生的

Logo

前往低代码交流专区

更多推荐