时间戳

首页 > 解决方案 > 将事件从子组件引发到 Vue.js 中的容器组件？

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

问题描述

我有一个子 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>

标签： javascriptvue.jsvuejs2

解决方案

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

推荐阅读