时间戳

首页 > 解决方案 > 子组件中发出事件的问题

vue.js - 子组件中发出事件的问题

问题描述

我仍然不明白如何发出事件，它显示了我的组件一（子）。我知道我做错了什么，但不知道具体是什么。应该隐藏一个组件。然后点击后应该显示。有什么帮助吗？

父组件

<template lang="pug">
        one-component(v-on:welcome="weAreHere") 
</template>

export default {
  name: "Playlist",
  data () {
    return { }

   },
component: {
   one-component
},
 methods: {
    weAreHere() {
        console.log("here we are!")
    }
}

单组分

<template>
  .mainBox1
    button.burgerMenu(v-on:click="$emit('welcome')")

   export default {
     name: "one-component",
     data () {
           return {
             show: true,
                 }
      },

标签： vue.js

解决方案

我看到了你的困惑。您正在尝试从父组件引用子组件的方法。您有一个子组件使用 emit 来联系您希望在子组件中调用该方法的父组件。您应该在子组件中调用子方法。你不需要发射任何东西。

$emit当您希望父母做某事时使用。

例如：

家长

<template>
     <ChildComponent v-on:signal="myMethod"/>
</template>

<script>
     methods: {
          myMethod() {
               //do something in parent after emit from child
          }
     }
</script>

在儿童中：

someMethod () {
     this.$emit('signal')
}

当父母收到“信号”时，他们会打电话给myMethod.

推荐阅读