Question

我有一个子Vue组件（SearchBox.Vue），它是一个简单的文本框，当用户按下Enter键时将触发filterByEvent。在容器组件中，我应该在文本框中获取字符串，然后执行函数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

该事件不起作用，因为该组件正在侦听骆驼事件。 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" >

Answer 2

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

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

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

2 个答案: