My Vue learning record 2: child component calls parent component’s method

Time:2021-11-25

First, create a sub component

<template>
   <div class="Child">

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

})
export default class Child extends Vue {

}
</script>

Create a parent component

<template>
   <div class="Father">

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

})
export default class Father extends Vue {

}
</script>

Call the child component inside the parent component

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

Then register the method

<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>

Call through emit in the subcomponent

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

This work adoptsCC agreement, reprint must indicate the author and the link to this article

If there is any mistake, you are welcome to give advice

Recommended Today

Vue、Three. JS implementation panorama

1、 First, we need to create a Vue project This paper mainly records the process of building panorama in detail, so building Vue project is not described too much. 2、 Install three js npm install three –save npm install three-trackballcontrols –save npm install three-orbit-controls –save npm i three-obj-mtl-loader –save npm i three-fbx-loader –save npm i […]