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

简介

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。

功能

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

1.首先建立一个子组件

<template>
   <div class="Child">

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

})
export default class Child extends Vue {

}
</script>

 

2.建立一个父组件

<template>
   <div class="Father">

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

})
export default class Father extends Vue {

}
</script>

 

3.在父组件里面调用子组件

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

4.然后注册方法

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

 

5.在子组件里面通过 emit 调用

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