Question

我有两个组成部分SingleTaskItem和ControlArea。 ControlArea有一个折叠按钮，当单击该按钮时，我想在SingleTaskItem中调用一个函数。到目前为止，这是我的代码。你能告诉我我在做什么错吗？

SingleTaskItem:
<template>
  <div class="SingleTaskItem">
  <ControlArea v-bind:collapsed="collapsed" 
         v-bind:onClickCollapse="onClickCollapse"/>
 </div>
</template>

<script>
export default {
  name: "SingleTaskItem",
  data() {
    return {
      collapsed: false
    };
  },
  methods: {
    onClickCollapse(value) {
      console.log("on Click Collapse called");
      this.collapsed = value;
    }
  }
};
</script>

ControlArea：

<template>
  <div class="ControlArea">
    <div class="action-btn edit">
      <i class="fas fa-ellipsis-h"></i>
    </div>
    <div class="action-btn collapsible">
      <i v-if="collapsed" v-on:click="uncollapse" class="fas fa-chevron-down"></i>
      <i v-else v-on:click="collapse" class="fas fa-chevron-up"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "ControlArea",
  props: {
    collapsed: Boolean
  },
  methods: {
    collapse(event) {
      console.log("collapse function is called");
      this.$emit("onClickCollapse", "true");
    },
    uncollapse(event) {
      this.$emit("onClickCollapse", "false");
    }
  }
};
</script>

Answer 1

您应该使用v-bind:onClickCollapse="onClickCollapse"而不是v-on:onClickCollapse。这很容易遗漏，因为您在事件名称中使用了“ on”一词-删除它可能会更清楚。

此外，要传递该真假字符串，您需要将$ event传递给函数调用：v-on:onClickCollapse($event)。要清理此问题，您可能还应该传递true / false布尔值而不是字符串。

Vuejs如何正确使用$ emit函数？

1 个答案: