将事件从子组件引发到 Vue.js 中的容器组件？答案

【问题标题】：raising an event from a child component to a container component in Vue.js?将事件从子组件引发到 Vue.js 中的容器组件？
【发布时间】：2019-07-18 06:14:27
【问题描述】：

我有一个子 Vue 组件 (SearchBox.Vue)，它是一个简单的文本框，当用户按下 Enter 键时会触发 filterByEvent。在容器组件中，我应该获取文本框中的字符串并执行一个函数 filterList 以根据输入的名称过滤客户的列表。我的问题是如何将文本框中输入的文本传递给父组件？

搜索框.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>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

该事件不起作用，因为该组件正在侦听驼峰事件。 Here is the explanation 为什么这不起作用。加上@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" >

【讨论】：

【解决方案2】：

我发现传递$event本身会传递文本框值

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

【讨论】：