Vue3-自定义hook函数
- 功能:可以将组合式API封装成一个函数,用于解决代码复用的问题。
- 注意:需要在src文件夹下创建一个文件夹hooks,在里面放js文件,命名随意,主要是将setup函数中的代码放入js文件中。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e82610c53123050ffcf6429bfdba9b80.png)
import { reactive } from 'vue'
export default function(){
let data = reactive({
num1 : 0,
num2 : 0,
result : 0
})
function sum(){
data.result = data.num1 + data.num2
}
return {data, sum}
}
<template>
数字1:<input type="number" v-model="data.num1"><br>
数字2:<input type="number" v-model="data.num2"><br>
求和结果:{{data.result}}<br>
<button @click="sum">求和</button>
</template>
<script>
import sum from './hooks/sum.js'
export default {
name : 'App',
setup(){
return sum()
}
}
</script>
return sum()
}
}
</script>