Vue2的router-view中子组件与父组件传值_router-view传值

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

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

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

事件名：changeActiveStep
传值：3

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

实现为：

1，在app.vue中

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

定义事件changeActiveStep调用的函数changeStep

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

methods:{
    changeStep(val){
    this.active_step=val
    }
  }
1
2
3
4
5

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

 data(){
    return {
      active_step:2
    }
1
2
3
4

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

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

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

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

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

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

调用子组件

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

1
2

取值方式为：

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

另外一种写法中：

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

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