поднять событие из дочернего компонента в контейнерный компонент в Vue.js?

Question

У меня есть дочерний компонент Vue (SearchBox.Vue), представляющий собой простое текстовое поле, которое запускает filterByEvent, когда пользователь нажимает клавишу Enter.В компонентах контейнера я должен получить строку в текстовом поле и выполнить функцию filterList, чтобы отфильтровать список клиентов на основе введенного имени.У меня вопрос, как передать текст, введенный в текстовом поле, родительскому компоненту?

SearchBox.vue

<template>
  <div class="SearchBox">
        <input type="text" id="SearchBox" placeholder="Search" 
        v-on:keyup.13="$emit('FilterByEvent', $event.target.value)" :value="value" >
    <font-awesome-icon icon="search" />
  </div>
</template>

<script>
  export default {
    name: 'SearchBox',
    data() {
      return {
        value: ''
      }
    }
  }
</script>

<style scoped>

  .SearchBox {
    display: flex;
  }

</style>

код контейнера

 <template>
  <div>
       <div>
        <SearchBox @FilterByEvent="filterList(value)"></SearchBox>
      </div>
   </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'
   import SearchBox from '@/components/templates/SearchBox.vue'
  @Component({
    components: {
      SearchBox
    }
  })

  export default class ContactList extends Vue {

    data() {
      return {

        filterString: ''

      }
    }

    filterList(filterStr :string) {
          this.$data.filterString = filterStr;
    }

  }
</script>

Answer 1

Я обнаружил, что прохождение самого события $ передаст значение текстового поля

 <SearchBox @FilterByEvent="filterList($event)"></SearchBox>

Answer 2

Событие не работает, так как компонент прослушивает событие верблюда. Вот объяснение о том, почему это не работает.Плюс @FilterByEvent ожидает выполнения функции.Поэтому используйте вместо этого

<SearchBox @filter-by-event="filterList"></SearchBox>

и создайте событие следующим образом:

<div class="SearchBox">
    <input type="text" id="SearchBox" placeholder="Search" 
    v-on:keyup.13="$emit('filter-by-event', $event.target.value)" :value="value" >