父组件不听自定义事件在VUE2

这是包含在Vue公司compont主HTML文件父组件不听自定义事件在VUE2

<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自定义事件。

来源

2017-06-26 Devarshi Roy

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

this.$emit('next-question')

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

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

来源

2017-06-26 05:51:06 Bert

谢谢。这解决了我的问题。但你能告诉我为什么我们应该避免骆驼事件？ –

@DevarshiRoy你应该避免骆驼事件，因为HTML中的属性（'v-on：some-event'）是不区分大小写的。 Vue会在控制台中显示警告，“请注意，HTML属性不区分大小写，并且在使用in-DOM模板时不能使用v-on来监听camelCase事件。您应该使用”camel-cased“而不是”camelCased “” – Bert

@DevarshiRoy此外，这是你的第一个问题，如果答案是有帮助的，解决了你的问题，你应该接受/ upvote。 – Bert

父组件不听自定义事件在VUE2

回答

相关问题