Question

这是包含Vue compont的主要html文件

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="styles.css"> -->

  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>

    <div id= "root">
      {{message}}
      <div class = "col-md-3"></div>
      <div class = "col-md-6">
        <question-container :question = 'details' ><question-container>
      </div>
      <div class ="col-md-3"></div>
          <!-- <mcq-behaviour :data = "details[0]"></mcq-behaviour> -->
    </div>
    <script src='main.js'></script>
  </body>

</html>

父组件

Vue.component('questionContainer',{
  props:['question'],
  template : ` <div><div v-on:nextQuestion = "updateQuestion()">{{question}}<mcq-behaviour :data = "question[x]"></mcq-behaviour></div></div>`, 
  data : function() { 
    return {x :0}
  },
  methods: {
    updateQuestion : function(){
      alert("Hi");
    }
  }
})

子组件

Vue.component('mcqBehaviour', {
  props: ['data'],
  template: `   
    <div class= "mngMrgin">
      <div class="panel panel-primary" >
        <div class="panel-heading">Question</div>
        <div class="panel-body">{{data.question}}</div>
      </div>
      <div v-for = "(opt,i) in data.options">
        <div class="well well-sm" >{{opt.text}}</div>
      </div>
      <div class ="row">    
        <div class="col-md-4"><button type="button" class="btn btn-primary btn-md" v-on:click = "previousQuestion()">Previous</button></div>
        <div class="col-md-4"><button type="button" class="btn btn-primary btn-md" v-on:click = "checkAnswer()">Check Answer</button></div>
        <div class="col-md-4"><button type="button" class="btn btn-primary btn-md" v-on:click = "nextPress()">NEXT</button></div>
      </div>
      <hr>
    </div>
    </div>
    </div>
  `,
  methods : {
    nextPress : function(){
      this.$emit('nextQuestion');       
    }
  }
})

应用

var app= new Vue({
  el : '#root',
  data: {
    message: "Hello from Vue",
    details : [
      {
        "_id": "5927f07c3c1501cd533519d6",
        "options": [
          {'text' : 'answer1',id : 1},
          {'text' : 'answer2' ,id : 2 },
          {'text' : 'answer3',id : 3},
          {'text' : 'answer4' ,id : 4},
        ],
        "question": "Hello, undefined! You have 2 unread messages.",
        "correctAnsid" : 1
      },{
        "_id": "5927f07c3c1501cd53351956",
        "options": [
          {'text' : 'answer1',id : 1},
          {'text' : 'answer2' ,id : 2 },
          {'text' : 'answer3',id : 3},
          {'text' : 'answer4' ,id : 4},
        ],
        "question": "Hello, undefined! You have 3 unread messages.",
        "correctAnsid" : 4
      }
    ]
  }
}

父组件未侦听从子组件发出的自定义事件UpdateQuestion。

Answer 1

尽量避免使用驼峰式事件。尝试

this.$emit('next-question')

此外，您的侦听器需要添加到组件本身，而不是包含该组件的元素。

<div>{{question}}
  <mcq-behaviour v-on:next-question = "updateQuestion()" :data = "question[x]"></mcq-behaviour>
</div>

父组件未在VUE2中侦听自定义事件

1 个答案: