访问子组件数据 vuejs

Question

如何从父组件中访问子组件数据？我有一个父组件“MissionPlanner ”,我想访问名为“ChosenHeroes”的子组件“chosenHeroes”数组。如果数组中有元素，我想最终呈现一个div并能够更新父数组中的数组

我不确定我是否应该使用emit（）以及如何确切地使用它。我尝试制作一个自定义事件“addHero”并将其传回。但是我遇到了错误

ChosenHeroes.vue

<template>
  <div>
    <select v-model="chosenHero">
      <!-- placeholder value -->
      <option :value="null">Select a hero</option>

      <!-- available heroes -->
      <option v-for="hero in heroes"
              :key="hero.name"
              :value="hero.name">
        {{ hero.name }}
      </option>
    </select>
    <span>&nbsp;</span>
    <button @click="addHero(chosenHero)"
            :disabled="chosenHero === null || chosenHeroes.length >= 3">Add Hero</button>
    <br>
    <h3>Chosen Heroes</h3>
    <div class="chosen-heroes">
      <div v-for="(hero, i) in chosenHeroes"
           :key="hero.name">
        <strong>Slot {{ i + 1 }}:</strong>
        <Hero :hero="hero"
              @removeHero="removeHero(hero)" />
      </div>
    </div>
  </div>
</template>

<script>
import Hero from "./Hero";

export default {
  components: {
    Hero
  },
  props: {
    "heroes": Array
  },
  data() {
    return {
      chosenHero: null,
      chosenHeroes: []
    };
  },
  methods: {
    addHero(name) {
      if(this.chosenHeroes.length < 3) {
        this.chosenHeroes.push({ name });
        this.chosenHero = null;
      }
      this.$emit("add-hero",this.chosenHeroes);
    },

    removeHero(hero) {
      this.chosenHeroes = this.chosenHeroes.filter(h => h.name != hero.name);
    }
  }
};
</script>

HeroPlanner.vue

<template>
  <div>
    <!-- justice leage application begins here -->
    <h1 id="jl">Justice League Mission Planner</h1>

    <ul class="roster">
      <h3>Roster:</h3>
      <li v-for="hero in heroes"
          :key="hero.name">

        <!-- to do: conditionally display this span -->
        <span v-if="isInList(hero.name)">✔ &nbsp;</span>

        <span>{{ hero.name }}&nbsp;</span>
        <span class="edit"
              @click="editHero(hero)">edit</span>
      </li>
      <br>
      <input type="text"
             placeholder="new name"
             v-model="newName"
             v-if="isEdit"
             @keyup.enter="changeName"
             @blur="clear">
      <br>
      <span v-if="isEdit">enter to submit, click outside the box to cancel</span>
    </ul>
    <chosen-heroes :heroes="heroes" :chosenHeroes="chosenHeroes" @add-hero="addHero" />
  </div>
</template>

<script>
import ChosenHeroes from "./components/ChosenHeroes.vue";

export default {
  components: {
   "chosen-heroes" : ChosenHeroes
  },
  data() {
    return {
      heroes: [
        { name: "Superman" },
        { name: "Batman" },
        { name: "Aquaman" },
        { name: "Wonder Woman" },
        { name: "Green Lantern" },
        { name: "Martian Manhunter" },
        { name: "Flash" }
      ],
      newName: "",
      isEdit: false,
      heroToModify: null,
      chosenHeroes: ChosenHeroes.data
    };
  },
  methods: {
...isInList(heroName) {
      return this.chosenHeroes.map(heroObject => heroObject.name).includes(heroName);
    }

下面是我运行它时遇到的错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: this.chosenHeroes.map is not a function"

found in

---> <MissionPlanner> at src/MissionPlanner.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:1888 TypeError: this.chosenHeroes.map is not a function
    at VueComponent.isInList (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/MissionPlanner.vue?vue&type=script&lang=js&:78)
    at eval (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aeb9565a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/MissionPlanner.vue?vue&type=template&id=e2c8c042&scoped=true& (app.js:946), <anonymous>:21:19)
    at Proxy.renderList (vue.runtime.esm.js?2b0e:2630)
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"aeb9565a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/MissionPlanner.vue?vue&type=template&id=e2c8c042&scoped=true& (app.js:946), <anonymous>:19:15)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)

我在这里阅读了这篇关于 emit（） 以及如何将数据从子组件发送到父组件的文章，但我不确定我是否正确使用它

Answer 1

< code>$emit将在被调用时工作，在父级中，它将与events相同(仅当事件发生时触发)。在这种情况下，您需要来自子节点的数据始终在父节点中呈现一个div(如果我理解正确的话)。

最好根据您的目的使用< code>Vuex商店。您可以将数据从子组件同步到< code>store中。由于< code>store数据是全局的，因此可以从所有组件访问它。

Answer 2

如果要将数据从子项传递到父项，可以将父项的方法作为 prop 传递给子项：

父模板部分

  <child-component :dataHandler="dataHandler">
  </child-component>

脚本方法部分中的父方法

dataHandler (input) {
  // handle your new data in parent component
}

子脚本道具部分

道具：["dataHandler"]

注册你的道具。您可以在子对象中使用dataHandler作为普通方法，并将新数据作为参数传递给子对象-该方法将在父对象中执行，但使用子对象中作为参数提供的数据。

您得到的错误表明chosenHeroes不是一个数组（可能是未定义的？）。

Answer 3

将@add-英雄="addHero"更改为@add-英雄="anyomeodName"并创建一个方法：

anyMethodName(value) {
    //do what you want with the chosenHeroes
}

< code>value是从子组件传递过来的< code>chosenHeroes。

例如，请参阅链接：https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2