vue2中method在vue3中怎么写
时间: 2024-04-17 18:25:16 浏览: 12
在Vue 3中,方法(methods)的写法与Vue 2有一些区别。以下是Vue 3中编写方法的方式:
```vue
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment
};
}
};
</script>
```
在Vue 3中,我们使用`setup`函数来定义组件的逻辑部分。在`setup`函数内部,我们可以使用Vue 3的新特性`Composition API`来定义方法。
在上面的例子中,我们使用`ref`函数来创建一个响应式的变量`count`,然后定义了一个名为`increment`的方法,在方法内部修改`count`的值。
在模板中,可以通过调用定义的方法来触发相应的逻辑:
```vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
```
这样,当点击按钮时,`increment`方法会被调用,从而更新`count`的值,并在模板中显示出来。
需要注意的是,Vue 3中的`setup`函数返回一个对象,该对象中包含了要在模板中使用的数据和方法。这就是Vue 3中编写方法的方式。