methods 方法

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

示例代码4-6-1　click 事件绑定 methods

<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 方法，这样在模板中就可以进行绑定，当 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 中定义并返回的方法为主，如示例代码 4-6-2 所示。

示例代码4-6-2　同名 methods

<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 中定义的。