vue3中如何添加method

若要在当前的 Vue 3 组件里添加新的 method（方法），可以在 setup 函数外部的 methods 对象中添加，也可以在 setup 函数内部定义并返回。下面分别介绍这两种方式。
在 methods 对象中添加方法
在 methods 对象中添加方法
在 setup 函数外部的 methods 对象里添加新方法，这样添加的方法和 Vue 2 里的方法定义方式类似，能直接通过 this 访问组件的其他属性和方法。以下是添加新方法 showMessage 的示例：

<template><el-row><!-- 原有的模板内容 --><button @click="showMessage">显示消息</button></el-row>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const tableData = ref([{name: '张三',workUnit: 'XX 公司',currentPosition: '经理'},{name: '李四',workUnit: 'YY 机构',currentPosition: '职员'}]);const radio = ref('1');return {tableData,radio};},methods: {// 点击身份证// onClickIDCard(id){// this.// }// 新增方法showMessage() {alert('这是一个新消息！');}},
});
</script><style>/* 原有的样式内容 */
</style>

在 setup 函数内部定义并返回方法

在 setup 函数内部定义方法，然后在返回对象中添加该方法，这种方式更符合 Vue 3 组合式 API 的风格。以下是同样添加 showMessage 方法的示例：

<template><el-row><!-- 原有的模板内容 --><button @click="showMessage">显示消息</button></el-row>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const tableData = ref([{name: '张三',workUnit: 'XX 公司',currentPosition: '经理'},{name: '李四',workUnit: 'YY 机构',currentPosition: '职员'}]);const radio = ref('1');// 定义方法const showMessage = () => {alert('这是一个新消息！');};return {tableData,radio,showMessage};},methods: {// 点击身份证// onClickIDCard(id){// this.// }},
});
</script><style>/* 原有的样式内容 */
</style>

以上两种方式都能在组件里添加新的方法，你可以根据项目需求和编码习惯来选择合适的方式。