如何从子组件vuejs运行方法

Question

我有父母和孩子的组件...我需要运行子方法，当我点击按钮在父。示例代码：

父母亲

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

Answer 1

在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>'
});

Answer 2

您可以通过不同的实现来实现这一点。最常见的方法是通过emit（如果您使用的是Redux模式，另一种方法是通过分派操作）

首先，您希望捕获父组件上的偶数并发出事件。所以这应该是你的模板。

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

然后，您必须在单击时调用的函数上发出一个事件（来自父组件）。类似的东西：

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

最后，您的子组件需要“听到”那个事件。您可以通过在子组件的创建的函数上这样做来实现：

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

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