发出变量不将数组从 child 传递到 parent？

Question

我正在尝试使用 emit 将标签数组从 child 组件传递到 parent 组件。 emit 正在注册并触发 parent 组件中的方法，但是当我记录我通过 emit 传递的参数时，它 returns 未定义。我不确定我做错了什么，因为我之前已经通过 emit 通过了 objects。

我尝试将数组转换为 object，将其作为同名的 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>```

Answer 1

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

应该是

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

有括号时，方法将按原样调用，没有括号时，它充当委托，参数将流向该方法。

Answer 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>

发出变量不将数组从 child 传递到 parent？

Emit variable not passing array from child to parent?

arrays

eventemitter

vue.js