Vue - 通过 Event.$emit 传递数据答案

【问题标题】：Vue - passing data via Event.$emitVue - 通过 Event.$emit 传递数据
【发布时间】：2021-01-13 14:00:49
【问题描述】：

我有一个关于通过 Event.$emit 传递数据的问题。我有一个父母有一个像这样的点击事件（appSelected）

<template>
    <v-app>
    <v-container>
    <v-select :items="results" item-text="name" item-value="id" v-model="selectedOption" @change="appSelected"
          :results="results"
          label="Choose Application"
          dense
     ></v-select>
     </v-container>
    </v-app>
  </template>

在该组件中，我有一个发出数据的方法。这是 id - this.selectedOption

 appSelected() {
   //alert("This is the id" + this.selectedOption);
   Event.$emit('selected', this.selectedOption);

在我的子组件中，我想传递并使用该值，但似乎无法使其工作。我在顶层 div 上有一个 v-if，如果它看到一个 true，它将显示在下面。这很好用，但我需要正在传递的 id。

这适用于显示 div，但也需要传递和使用 id。如何传递和使用 id？

 Event.$on('selected', (data) => this.appselected = true);

<template>
 <div v-if="appselected">
 Choose the Client Source
  <input type="text" placeholder="Source client" v-model="query" 
  v-on:keyup="autoComplete"
  v-on-clickaway="away"
  @keydown.esc="clearText" class="form-control">
   <span class="instructiontext"> Search for id, name or coid</span>
  <div class="panel-footer" v-if="results.length">
   <ul class="list-group">
    <li class="list-group-item" v-for="result in results">
   <a href="#" @click="getClient(result.name)">{{ result.name + "-" + result.oid }} </a>
    </li>
   
   </ul>
    </div>
 </div>
</template>
<script>
import axios from 'axios'
import { directive as onClickaway } from 'vue-clickaway';
 export default{
  directives: { 
    onClickaway: onClickaway,
  },
  
  data(){
   return {
    add_id: '',
    onSelecton: '',
    input_disabled: false,
    selected: '',
    query: '',
    results: [],
    appselected: false
   }
  },
  methods: {
   
    getClient(name) {
        this.query = name;
        this.results = [];
    },
      
    clearText(){
        this.query = '';
    },
     away: function() {
      // Added for future use
    },
    autoComplete(){
    this.results = [];
    if(this.query.length > 2){
     axios.get('/getclientdata',{params: {query: this.query}}).then(response => {
      this.results = response.data;
      
     });
    }
   }
  },

  created() {
     Event.$on('selected', (data) => this.appselected = true);
     console.log(this.appselected);
    }
  
 }
</script>

提前感谢您的帮助！

【问题讨论】：

标签： javascript vue.js events vuejs2 vue-component

【解决方案1】：

更改您的侦听器以使用发出的值执行某些操作。我看到父级已经有一个 selected 变量，您可能打算将其用于此目的：

Event.$on('selected', (selectedOption) => {
  this.selected = selectedOption;
  this.appselected = true;
});

selectedOption 是子级发出的值。

【讨论】：