从vue.js中的父模板调用函数

Question

我在父组件模板中有一个按钮，如下所示。

   <template>
        <div class="data_table">
            <button class="mini ui button" @click="show">                  
        </div>
   </template>

这个show()保存在下面的子组件中

<script>  
    export default {   
        data: 
            function () {
                return {
                    value: this.active1
                }
            },
        props: {
            active1: true
        },        
        methods: {
            show () {
                this.active1 = true
            }
        },  
    }
</script>

我怎么称之为show()功能？

我正在使用vue-cli。

谢谢

Answer 1

子组件

<template>
 <div class="data_table">
    <button class="mini ui button" @click="show">                  
 </div>
</template>


data: => ({
 value: this.active1
}),
props: {
 active1: {
   type: Boolean
 }
},
methods: {
  show () {
    this.$emit('someEventName')
  }
}

父组件

 <template>
    <child-component
       :active1="booleanValue"
       @someEventName="show"
    />
</template>


data: => ({
 booleanValue: false
}),
method: {
 show () {
   this.booleanValue = true
 }
}