Question

我仍然不知道如何发出事件，该事件显示了我的组件一（子组件）。我知道我做错了事，但不知道到底是什么。一种成分应该是皮革。然后单击后应显示。有帮助吗？

父组件

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

Answer 1

我看到你的困惑。您正在尝试从父级引用子级组件的方法。您有一个使用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。

Answer 2

在将方法添加到父级的编辑之后，从子级中删除了该方法。您的孩子中仍然需要一种方法来使用$ emit。如果希望它通过console.log（）对信号做出反应，则需要在父级中添加一个。

我不使用pug，也没有尝试运行此代码，但是这个主意应该足够清楚，以使其起作用。

父组件

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

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

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

子组件

<template>
  .mainBox1
    button.burgerMenu(v-on:click="signalParent")
</template>

export default {
  name: "child-component",
  data () {},
  methods: {
    signalParent() {
      this.$emit('signal')
    }
  }
...

子组件中的发射事件有问题

2 个答案: