我有2个组件,父母和孩子。我想在父亲的next
按钮上显示子组件,在子项的previous
按钮上显示父组件。
我该怎么做?
现在我可以在下一个按钮中调用子组件,但是如果我单击子组件的prev按钮,则父组件不会到来。如何调用父组件?
这是我的父组件
<template>
<v-form>
<v-flex>
<div v-if="response.inputType == 'radio'" v-model="response.next" class="radio radio-success"
v-bind:id="response.id" >
<input type="radio" v-bind:id="'option'+ response.id" v-bind:name="index"
v-bind:next="response.next"
v-bind:rules="[v => !!v || 'You must agree to continue!']" v-bind:value="response.option" v-model="question.userResponses"
v-on:click="updateResponses" v-bind:checked="question.userResponses">
<label v-bind:for="'option'+ response.id" >
{{response.option}}
</label>
</div>
<v-btn color="info" v-bind:id="question.prev" v-if="currentQuestion > 0"
v-on:click="goToPreviousQuestion(e)" >prev</v-btn>
<v-btn color="success"
v-on:click="goToNextQuestion()">Next</v-btn>
</v-flex>
</v-form>
<child v-if="showsubchild">
</child>
</template>
<script>
import child from '../components/child'
components: {
child
}
methods: {
goToNextQuestion() {
this.showsubchild=true;
}
}
</script>
这是我的孩子组件
<div>
<div v-if="response.inputType == 'radio'"
v-model="response.next"
class="radio radio-success"
v-bind:id="response.currentQuestion" >
<input type="radio"
v-bind:id="'child'+ response.currentQuestion"
v-bind:name="index"
v-bind:value="response.option" v-model="question.userResponses"
v-bind:checked="question.userResponses">
<label v-bind:for="'child'+ response.currentQuestion" >
{{response.option}}
</label>
</div>
<v-btn color="info"
v-on:click="prev(e)" >
prev
</v-btn>
<v-btn color="success"
v-on:click="next()">
Next
</v-btn>
<main if="showPerent"></main>
</div>
<script>
import main from '../components/survey'
export default {
name: "create",
props: ['my-props'],
components: {
main,
},
methods: {
next(){
this.showPerent=true,
}
}
}
</script>