梗概:

我们用 methods 选项向组件实例添加方法,它应该是一个包含所需方法的对象

  1. Vue自动绑定自定义方法中的this为当前组件实例
  2. 自定义的方法不要使用箭头函数

1. 注意:

  1. 从模板调用的方法不应该有任何副作用,比如更改数据或触发异步进程。如果你想这么做,应该使用生命周期钩子来替换。

实例:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5
<span :title="increment()">
  {{ increment() }}
</span>

1. 添加防抖方法:

child::Vue 为组件添加防抖方法