Question

我有这3个组件。一个是问题组成部分，由问题组成。第二个是QuestionOption的选择列表。第三个是我的主要组成部分。如何将QuestionOption组件中的数据提供给主组件。由于主要组件不是QuestionOption的父组件，因此我无法使用$ emit。我也使用公共汽车，但它不适用于我的情况。谁可以帮我这个事。

在提交按钮后，如何获得所有选择的答案？这是我的代码。

Main.vue

    <div class="quiz-background">

        <question 
            v-for="(question, $indexParent) in randomQuestions"
            :question="question['doc'].question"
            :choices="question['doc']['choices']"
            :indexParent="$indexParent"
            :correctAnswer="question['doc'].correctAnswer"
        >               
        </question>

        <section style="margin:16px">
            <v-ons-button
                modifier="cta" 
                @click="submit" 
                v-show="!isDone"
            >Submit
            </v-ons-button>
        </section>

    </div>

   <script>
        submit() {

            bus.$on('choosed', function(answer) {
                console.log(answer);

            });

        }, 
   </script>

Question.vue

<template>

<v-ons-list>
    <v-ons-list-header>
        {{indexParent + 1}}.{{ question }}
    </v-ons-list-header>


    <question-option 
        v-for="(choice, key, $index) in choices" 
        :choice="choice" 
        :letter="key" 
        :indexParent="indexParent" 
        :index="$index"
        :correctAnswer="correctAnswer"
    >

    </question-option>


</v-ons-list>


</template>

<script>
import QuestionOption from './QuestionOption.vue';

export default {


    props: ['question', 'indexParent', 'choices', 'correctAnswer'],

    components: {
        QuestionOption
    }
}
</script>

QuestionOption.vue

<template>
<v-ons-list modifier="inset">
    <v-ons-list-item
        :name="'question-' + indexParent"

        :modifier="longdivider"
        :key="letter"
        tappable
    >
        <label class="left">
            <v-ons-radio    
                :name="'question-' + indexParent"
                :input-id="indexParent + '-' + index"
                :value="letter"
                :key="letter"
                v-model="chosenAnswer"
                @change="appendAnswer($event)"
            >   
            </v-ons-radio>
        </label>

        <label 
            class="center" 
            :for="indexParent + '-' + index"    
            :class="{'success' : isSuccess, 'danger' : isDanger}"       
        >
            {{ letter }} . {{ choice }}
        </label>

    </v-ons-list-item>


</v-ons-list>

</template>

<script>

import Vue from 'vue';

var bus = new Vue();

export default {


    data() {

        return {
            chosenAnswer: ''
        }
    },

    props: ['letter', 'choice','correctAnswer', 'indexParent', 'index'],

    computed: {
        isSuccess () {
            return this.chosenAnswer === this.correctAnswer;
        },
        isDanger () {

            return this.chosenAnswer !== this.correctAnswer;
        }
    },
    methods: {

        appendAnswer (event) {

            var answer = event.target.value;

            bus.$emit('choosed', answer);
        }
    }

}
</script>

Answer 1

与我在评论中提到的the article一样，您可以创建一个名为event-bus.js的js文件，包含以下代码。

// event-bus.js
import Vue from 'vue';
var EventBus = new Vue();
export default EventBus;

之后，将其导入QuestionOption.vue和Main.vue，如下所示

import bus from './event-bus';

然后再试一次。您的代码无法工作的原因是因为您生成了两个Vue实例，它们之间没有任何关系，因此不会发生通信。

如何从嵌套组件中获取数据

1 个答案: