1 场景
多个类似组件都需要传参data，用于请求接口或者处理数据，想让组件干净整洁，把参数data提出来
2 方法
选项式
可以使用mixin混入或者extends继承（略）
组合式
可以使用hook
无脑式踩坑（如下代码）：
// hook文章来源：https://www.toymoban.com/news/detail-787016.html
import { defineProps } from 'vue';
import service from '@/utils/index';
export default function useData() {
const props = defineProps({
data: {
type: Object,
default: () => ({
name: '一二三',
value: 123,
url:''
})
}
});
console.log(props.data);
const data = ref();
onBeforeMount(async () => {
data.value = await service(props.data.url);
});
return data;
}
// component
<template>
<!--省略 -->
</template>
<script setup lang="ts">
import useData from '@/hook/useData';
const data = useData();
当在组件中引用hook后，控制台会警告，同时组件无法渲染
解决方案：useAttrs
// hook
import service from '@/utils/index';
export default function useData() {
const attrs = useAttrs();
const data = ref();
// 如需监听attrs变化，可以使用watch
watch(()=>attrs.data,(val)=>{
getData()
},{deep:true})
onBeforeMount(async () => {
await getData()
});
const getData = async () => {
data.value = await service(attrs.data.url);
}
return data;
}
// component文章来源地址https://www.toymoban.com/news/detail-787016.html
<template>
<!--省略 -->
</template>
<script setup lang="ts">
import useData from '@/hook/useData';
const data = useData();
到了这里，关于vue3 useAttrs的使用场景，提取共有props的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
