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

【问题标题】：Call function from parent template in vue.js从 vue.js 中的父模板调用函数
【发布时间】：2018-06-08 21:29:46
【问题描述】：

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

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

谢谢

【问题讨论】：

你的意思是按钮是一个组件吗？
感谢@samayo 的回复。不，该按钮与其他 HTML 内容一起位于父模板中。谢谢
我想也许你应该添加更多示例
谢谢@samayo。我添加了更多代码，我认为这会对您有所帮助。谢谢
您可以做的一件事是，从子级发出事件并在父级上处理事件并使用道具将值传递给子级。

标签： vuejs2 vue-component vue-cli

【解决方案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
 }
}

【讨论】：