methods方法

除了上面所讲解的方法之外，还有一类就是使用最多的对应配置式API中的methods类方法了，这类方法主要结合模板template中的一些回调事件使用，如示例代码所示。

<div id="app">
  {{count}}
  <button @click="add">点我+1</button>
</div>
Vue.createApp({
  setup() {
    const count = Vue.ref(0)

    const add = ()=>{
      count.value++
    }

    return { count,add }
  }
}).mount("#app")

上面代码中，在setup方法中返回了add方法，这样在模板template中就可以进行绑定，当click事件触发时，会进入这个方法。

当结合配置式API使用时，如果在组件的methods中也配置了同名的方法，那么会优先执行setup中定义的，methods中定义的方法将不会执行，如下代码：

Vue.createApp({
  setup() {
    const count = Vue.ref(0)

    const add = ()=>{
      count.value++
    }

    return { count,add }
  },
  methods:{
    add(){} // 不会触发
  }
}).mount("#app")

同样，在进行组件通信时，如果遇到同名的方法，优先以setup中定义并返回的方法为主，如示例代码所示。

<div id="app">
  <component-b @add="add"/>
</div>
const componentB = {
  template:'<div></div>',
  setup(props,{emit}) {
    emit('add') // 通知父组件
  }
}
Vue.createApp({
  components: {
    'component-b': componentB
  },
  setup() {
    const add = ()=>{
      console.log('setup add')
    }
    return { add }
  },
  methods:{
    add(){
      console.log('methods add') // 不会触发
    }
  }
}).mount("#app")

上面代码中，当子组件调用emit通知父组件时，会调用父组件setup方法中的add方法，而不会调用methods中定义的。