VUE 子组件调用父组件方法修改父组件属性

首先要了解VUE中$emit 的用法

父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行

举例:

子组件:

<template>  
  <div>  
    <el-button type="primary"  @click="NextStep" >下一页</el-button>
  </div>  
</template>  
<script>  
export default {  
  props:['activeName'],
  methods:{  
   NextStep(){

         this.$emit('GetCurrentRoute',"Diagnosis");

    },
  }  
}  
</script>

父组件:

<template>
  <div>
   <el-tabs  v-model="activeName">
      <el-tab-pane label="评分" name="first">
        <Score v-bind:activeName="activeName" v-on:GetCurrentRoute="GetCurrentRoute"></Score>
      </el-tab-pane>
       <el-tab-pane label="护理" name="second">
        <Diagnosis v-bind:activeName="activeName" v-on:GetCurrentRoute="GetCurrentRoute"></Diagnosis>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    GetCurrentRoute(pathname) {
      this.activeName = "first";
    },
  },
};
</script>

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页