我的 vue 学习记录2: 子组件调用父组件的方法

Vue
409
0
0
2022-07-27
标签   Vue组件

首先建立一个子组件

<template> 
   <div class="Child">

   </div>
</template>
<script lang='ts'>
import { Options, Vue } from 'vue-class-component';
@Options({

})
export default class Child extends Vue {

}
</script>

建立一个父组件

<template> 
   <div class="Father">

   </div>
</template>
<script lang='ts'>
import { Options, Vue } from 'vue-class-component';
@Options({

})
export default class Father extends Vue {

}
</script>

在父组件里面调用子组件

<template> 
   <div class="Father"> 
        <Child /> 
   </div>
</template>

然后注册方法

<template> 
   <div class="Father"> 
           <Child @func="method" /> 
   </div>
</template>
<script lang='ts'>
import { Options, Vue } from 'vue-class-component';
@Options({

})
export default class Father extends Vue {
   method() {}
}
</script>

在子组件里面通过 emit 调用

export default class Child extends Vue {
 method() {
      this.$emit("func");
 }  
}