标题可能说的不清楚，比如以下写法：
// hooks.js
function useList (apiUrl) {
const loading = ref(false)
const list = ref([])
const getData = () => {
loading.value = true
http.get(apiUrl).then(data => {
list.value = data
loading.value = false
})
}
const MyList = {
render () {
return <a-list data-source={list.value} loading={loading.value} size="small" />
}
}
const ReloadBtn = {
render () {
return <a-button type="primary" size="small" onClick={getData} disabled={loading.value}>刷新</a-button>
}
}
}
// App.vue
<template>
<div>
<Component :is="ReloadBtn" />
</div>
<Component :is="MyList" />
</template>
<script>
import { useList } from 'hooks.js'
export default {
setup () {
const { MyList, ReloadBtn } = useList('http://xxxxxx/xxx')
return { MyList, ReloadBtn }
}
}
</script>
// or App.vue with script setup
<template>
<div>
<ReloadBtn />
</div>
<MyList />
</template>
<script setup>
import { useList } from 'hooks.js'
const { MyList, ReloadBtn } = useList('http://xxxxxx/xxx')
</script>
类似这样（把 UI 封装在 hook 函数里）的实践，算是邪道么？因为我似乎 Google 不到任何相关的讨论，而在 VueUse 这类的库中，我也看不到任何这样做的例子，所以有点好奇。这样做有什么重大的缺陷吗？
1
Select Language