学习日记【vue】-2020/12/09

因为工作需要，开始对uni-app和vue的学习

于我来说，目前遇到的难点在于vue.js组件的自定义事件

教程原网址：https://www.runoob.com/vue2/vue-component-custom-event.html

实例如下：

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

个人疑问点在于对”this.$emit('increment')“的理解

在阅读这篇文章（https://blog.csdn.net/wangxiaoxiaosen/article/details/75258013）后

理解到this.emit的作用是触发自定义函数且括号内可以加参数

点击increment就会触发incrementTotal函数，使得total的值+1