组件:事件传递

知识点

  • v-on
  • $emit

v-on

侦听组件事件,当组件触发事件后进行事件处理。

$emit

触发事件,并将数据提交给事件侦听者。

综合例

  1. <div id="myApp">
  2. <h1>人生加法</h1>
  3. <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
  4. <hr/>
  5. <h3>{{result}}</h3>
  6. </div>
  7. <script>
  8. Vue.component('add-method', {
  9. props: ['a', 'b'],
  10. template: '<div><button v-on:click="add">加吧</button></div>',
  11. methods: {
  12. add: function(){
  13. var value = 0;
  14. value = this.a + this.b;
  15. this.$emit('add_event', {
  16. result:value
  17. });
  18. }
  19. },
  20. });
  21. var myApp = new Vue({
  22. el: '#myApp',
  23. data: {
  24. result: 0
  25. },
  26. methods: {
  27. getAddResult: function(pval){
  28. this.result = pval.result;
  29. }
  30. },
  31. });
  32. </script>

源文件

小马视频频道

http://komavideo.com