Parent 比较。没有听 child $emit

Question

我创建了一个表单组件 Form.vue，它是 PostPage.vue 的 child。在 'Form.vue' 中，我想为 parent 发送一个 $emit 来更改 Prop 值 btn-text.

Parent 组件 PostPage.vue:

<template>
  <div id="post-page">
    <div class="header-text pt-5 text-center">
      <div class="h2 font-weight-bold">
        Welcome to the DevTribe Community
      </div>
      <div class="h5 font-weight-bold">
        Ask questions, share content, introduce yourself. Be nice!
      </div>
    </div>
    <Form />
    <!-- textarea-not-clear isn't catched here below -->
    <Posts
      :btn-text="btnText"
      @textarea-not-clear="changeBtnText()"
    />
  </div>
</template>

<script>
import Form from './PostPage/Form.vue';
import Posts from './PostPage/Posts.vue';
export default {
  name: 'PostPage',
  components: {
    Form,
    Posts
  },
  data() {
    return {

    }
  },
  methods: {
    changeBtnText() {
      console.log('tss');
    }
  }
}
</script>

<style lang="scss" scoped>
#post-page {
    background-color: #ffffff;
    height: 100%;
    padding: 0 20%;

}
</style>

如果文本区域为空

，发射将在 watch 内触发

Child 组件 Form.vue:

<template>
  <div id="form">
    <form class="text-area text-center mt-5 mx-auto w-100">
      <div class="row">
        <div class="col-12">
          <textarea
            v-model="textarea"
            name="post-text"
            rows="6"
            class="w-100"
            placeholder="Create a post..."
          />
        </div>
        <div class="col text-left">
          <button
            type="button"
            class="btn btn-outline-primary"
          >
            Send
          </button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Form',
  data() {
    return {
      textarea: ''

    }
  },
  watch: {
    textarea: function() {
      if (this.textarea !== '') {
        this.$emit('textarea-not-clear', 'Join Discussion');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text-area {
    height: 300px;
    textarea {
        border: solid black 1px;
    }
    button {
        width: 120px;
    }
}
</style>

我可以看到在 DevTool 的 Vue 扩展中触发的事件：

但由于某种原因无法捕获该事件，PostPage.vue 中的 changeBtnText() 函数将不会被触发，甚至不会给出 console.log('test')

Answer 1

要事第一。 Form 不是一个好的组件名称，因为它与标准 HTML 元素冲突。我很惊讶你没有收到这方面的警告。参见 https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential

接下来，您的事件的问题是您收听了错误的组件。

<Form />
<!-- textarea-not-clear isn't catched here below -->
<Posts
  :btn-text="btnText"
  @textarea-not-clear="changeBtnText()"
/>

Form 组件正在触发事件，但您的侦听器在 Posts 组件上。

我还强烈建议您停止在组件上使用 ID，而是使用类进行样式设置。

Parent 比较。没有听 child $emit

Parent comp. is not listening to child $emit

javascript

vue.js

events

vuejs2

emit