发出变量不将数组从子级传递给父级？答案

【问题标题】：Emit variable not passing array from child to parent?发出变量不将数组从子级传递给父级？
【发布时间】：2019-06-10 15:17:59
【问题描述】：

我正在尝试使用 emit 将一组标签从子组件传递到父组件。发射在父组件中注册并触发该方法，但是当我记录我通过发射传递的参数时，它返回未定义。我不确定我做错了什么，因为我之前通过发射传递了对象。

我尝试将数组转换为对象，将其作为同名的 this 值传递，而不将其作为变量存储在方法本身中。

//edittagsform
<template>
    <div class="card">
      <div class="card-body">
        <div class="form-inputs">
          <h5>Add tags:</h5>
          <tagsField v-on:incoming="updateTagsList()"/><br>
          <h5>Current tags:</h5>
          <div v-if="tags.length > 0">
            <tagsList v-for="tag in tags" v-bind:tag="tag"/>
          </div>
          <div v-else>
            <p>No tags associated</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import tagsField from './tagsField'
import tagsList from './tagsList'

export default {
  data: function () {
    return {
      tags: {
        tag: this.tagList,
    }
  },
  props: ['tagList'],
  name: 'editTagsForm',
  methods: {
    updateTagsList(newTag) {
      console.log(newTag)
      this.tags.push(newTag)
    }
  },
  components: {
      tagsField,
      tagsList
  }
}
</script>

<style scoped>
</style>

//tagsField.vue
<template>
<div class="input-group">
    <form>
        <input-tag v-model="newTags"></input-tag><br>
        <input type="button" value="submit" v-on:click="addTag()" class="btn btn-secondary btn-sm">
    </form>
</div>
</template>

<script>
export default {
  data: function () {
    return {
      newTags: [],
    }
  },
  methods: {
      addTag() {
          for(var i = 0; i <= this.newTags.length; i++){
              var arr = this.newTags[i]
              this.$emit('incoming', {
                  arr
              })
          }
        }
    }
}
</script>

<style scoped>
</style>```

【问题讨论】：

我不确定，但首先添加：arr = [];进入数据，然后尝试在'for循环'中添加arr.push（）中的addTag（）函数。因为什么都不知道是在创建你的数组，所以数组是空的
您可以在发出事件之前尝试记录“arr”以验证值是否符合您的预期吗？

标签： arrays vue.js eventemitter

【解决方案1】：

<tagsField v-on:incoming="updateTagsList()"/>

应该是

<tagsField v-on:incoming="updateTagsList"/>

当你有括号时，方法将按原样调用，没有，它充当委托，参数将传递给方法。

【讨论】：

感谢您的快速回复！仍然没有解决我的问题。
我不反对，但这个答案实际上是错误的。 Vue 足够聪明，可以检测到 v-on: 绑定中的即时函数调用，并将它们的执行推迟到事件发生。
是的，执行将被推迟，但没有任何参数传递给方法。

【解决方案2】：

//tagsField
<template>
<div class="input-group">
    <form>
        <input-tag v-model="newTags"></input-tag><br>
        <input type="button" value="submit" v-on:click="addTag()" class="btn btn-secondary btn-sm">
    </form>
</div>
</template>

<script>
export default {
  data: function () {
    return {
      newTags: [],
    }
  },
  methods: {
      addTag() {
        const newTags = this.newTags;
        this.$emit('incoming', newTags)
        this.newTags = []
      }
    }
  }
</script>

<style scoped>
</style>

//edittagsform
<template>
    <div class="card">
      <div class="card-body">
        <div class="form-inputs">
          <h5>Add tags:</h5>
          <tagsField v-on:incoming="updateTagsList"/><br>
          <h5>Current tags:</h5>
          <div v-if="tags.length > 0">
            <tagsList v-for="tag in tags" v-bind:tag="tag"/>
          </div>
          <div v-else>
            <p>No tags associated</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import tagsField from './tagsField'
import tagsList from './tagsList'

export default {
  data: function () {
    return {
      tags: this.tagList
    }
  },
  props: ['tagList'],
  name: 'editTagsForm',
  methods: {
    updateTagsList(newTags) {
      console.log(newTags)
      for(var i = 0; i < newTags.length; i++) {
        console.log(i)
        this.tags.push(newTags[i])
      }
    }
  },
  components: {
      tagsField,
      tagsList
  }
}
</script>

<style scoped>
</style>

【讨论】：