我们如何在下一个按钮中转到子组件并返回到vuejs中的父组件prev按钮

时间:2018-03-29 07:53:43

标签: vue.js vuejs2 vue-component

我有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>

enter image description here

这是我的孩子组件

enter image description here

<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>

0 个答案:

没有答案