Question

我正在尝试使用发射将标记数组从子组件传递到父组件。当在父组件中注册并触发该方法时，emit将日志记录为通过emit传递的参数时，它将返回undefined。我不确定自己在做什么错，因为我之前已经通过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>```

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>

发出变量不将数组从子级传递到父级？

2 个答案: