Vue - невозможно передать данные от компонента к родителю с помощью события $ emit - PullRequest
Новая
       8

Vue - невозможно передать данные от компонента к родителю с помощью события $ emit

0 голосов
/ 30 октября 2019

Передача данных от дочернего к родителю в Vuejs (это так сложно?)

Невозможно передать данные от дочернего компонента родительскому компоненту с помощью emit

$ передать событие от дочернего к родительскому компоненту Vue 2

Я просмотрел посты выше и документацию Vue. Из того, что я вижу, я все делаю правильно, но он все еще не работает.

Я включил свой код, но боюсь, что не могу воспроизвести его с помощью фрагмента стека. Работающее воспроизведение можно найти здесь в этой кодовой песочнице

Buttons.vue

Я отметил ниже под функцией navigateTo(), что подтверждает моя консольчто функция в компоненте получает правильное значение, но я не уверен, что это значение правильно отправляется компонентом или принимается родителем. 

<template>
  <div class="navigation section columns">
    <div class="container column has-text-centered" v-for="button in navigation" :key="button.text">
      <button class="button is-primary" @click="navigateTo(button)" type="button">{{ button.text }}</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Buttons",
  props: {
    text: String,
    dest: String
  },
  computed: {},
  methods: {
    navigateTo(button) {
      // This console log correctly outputs "button dest 2"(or whatever the button value is)
      console.log("button dest", button.dest);
      this.$emit("navigate", button.dest);
    }
  },
  data() {
    return {
      navigation: [
        { text: "North", dest: "2" },
        { text: "East", dest: "3" },
        { text: "South", dest: "4" },
        { text: "West", dest: "5" }
      ]
    };
  }
};
</script>

App.vue 

<template>
  <div id="app" class="container">
    <scene @navigate="navigateTo"></scene>
    <buttons></buttons>
  </div>
</template>

<script>
import Scene from "./components/Scene.vue";
import Buttons from "./components/Buttons.vue";

export default {
  name: "app",
  methods: {
    navigateTo(dest) {
      console.log('received value', dest);
      this.selectedScene = dest;
    }
  },
  components: {
    Scene,
    Buttons
  }
};
</script>
<style scoped>
</style>

1 Ответ

2 голосов
/ 30 октября 2019

Компонентом, отправляющим событие, является кнопка, и вы слушаете событие в компоненте сцены:

Измените свой App.vue следующим образом: 

<template>
  <div id="app" class="container">
    <scene ></scene>
    <buttons @navigate="navigateTo" ></buttons>
  </div>
</template>

<script>
import Scene from "./components/Scene.vue";
import Buttons from "./components/Buttons.vue";

export default {
  name: "app",
  methods: {
    navigateTo(dest) {
      console.log('received value', dest);
      this.selectedScene = dest;
    }
  },
  components: {
    Scene,
    Buttons
  }
};
</script>
<style scoped>
</style>
...