我如何从子组件 vuejs 运行方法

Posted

技术标签:

【中文标题】我如何从子组件 vuejs 运行方法【英文标题】:How i can run method from child component vuejs 【发布时间】:2020-06-04 22:43:52 【问题描述】:

我有父组件和子组件...当我单击父组件中的按钮时,我需要运行子方法。 示例代码:

父母

<template>
 <child-component></child-component>
 <button>Open Modal in child Component (set modal = true in child component)</button>
</template>

孩子:

<template>
<div v-if="modal">
 <button @click="modal = false">Close</button>
</div>
</template>
<script>
export default 
  data() 
    return 
     modal: false
    
   

</script>

【问题讨论】:

这里可以找到类似问题的解决方案:***.com/a/45463576/4267716 【参考方案1】:

您可以通过不同的实现来实现这一点。最常见的是通过emit(如果您使用 Redux 模式,另一种选择是通过调度操作)

首先,您要捕获父组件上的偶数和emit 事件。所以这应该是你的模板。

<template>
 <child-component></child-component>
 <button @click="click">Open Modal in child Component (set modal = true in child component)</button>
</template>

然后您必须在创建click 时调用的函数上emit 一个事件(来自父组件)。 类似的东西:

click: function() 
  this.$emit('update');

最后,您的子组件需要“听到”该事件。您可以在子组件的 created 函数上使用类似的方法来实现:

this.$parent.$on('update', this.updateModal);

this.updateModal 是您的子组件上的一个函数,它只是翻转布尔值。

【讨论】:

【参考方案2】:

在 vue 中,您可以将函数作为道具传递。因此,您可以在父组件中向备用模型添加一个功能,然后将其传递给您的子组件,以便它可以正常使用。下面我举一个简单的例子。

小编辑,您可以使用绑定到模态状态的状态来绑定隐藏/显示类之类的类

// html
<div id="app">
     <child v-bind:on-click="toggleModal" v-bind:status="modal" />
</div>


// Parent Component
var sample = new Vue(
     el: '#app',
     data: 
        modal: false
     ,
     methods: 
        toggleModal() 
           this.modal = !this.modal
        
     
);

// Child component with function prop
Vue.component('child', 
     props: 
        onClick: Function,
        status: Boolean
     
     template: '<button v-on:click="onClick()">Press Me</div>'
);

【讨论】:

以上是关于我如何从子组件 vuejs 运行方法的主要内容,如果未能解决你的问题,请参考以下文章

VueJs:如何使用 $emit(optionalPayload) 和 $on 将“计算函数”值从子组件传递给父组件?

vuejs 从子组件更新父数据

vuejs 从子组件更新父数据

将一个变量的值从子组件传递给两个父组件,vuejs? nuxt

Vuejs 2将道具对象传递给子组件并检索

Vuejs 中从子级到父级的事件监听