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

Posted 2023-02-23

【中文标题】从 vue.js 中的父模板调用函数

【英文标题】：Call function from parent template in 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。我添加了更多代码，我认为这会对您有所帮助。谢谢

您可以做的一件事是，从子级发出事件并在父级上处理事件并使用道具将值传递给子级。

【参考方案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