我的 vue 學習記錄2: 子元件呼叫父元件的方法

首先建立一個子元件

<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");
 }  
}

本作品採用《CC 協議》，轉載必須註明作者和本文連結