Родительский комп.не слушает child $ emit - PullRequest
Новая
       50

Родительский комп.не слушает child $ emit

0 голосов
/ 21 сентября 2019

Я создал компонент формы Form.vue, который является дочерним от PostPage.vue.Внутри Form.vue я хочу отправить $ emit для родителя, чтобы изменить значение Prop btn-text.

Родительский компонент 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>

emit будет запущен в watch, если текстовое поле пусто

Дочерний компонент 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>

Я вижу событие, запущенное в расширении Vue для DevTool: enter image description here

, но по какой-то причине невозможно отловить это событие, функция changeBtnText() внутри PostPage.vue не будет запущена и даже не выдаст console.log('test')

1 Ответ

1 голос
/ 21 сентября 2019

обо всем по порядку.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.

Я также настоятельно рекомендую вам прекратить использовать идентификаторы в ваших компонентах и ​​использовать вместо них классы для стилизации.

...