vue3 useAttrs的使用场景，提取共有props

本文主要是介绍vue3 useAttrs的使用场景，提取共有props，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1 场景

多个类似组件都需要传参data，用于请求接口或者处理数据，想让组件干净整洁，把参数data提出来

2 方法

选项式

可以使用mixin混入或者extends继承（略）

组合式

可以使用hook

无脑式踩坑（如下代码）：

// hook

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变化，可以使用watchwatch(()=>attrs.data,(val)=>{getData()     },{deep:true})  onBeforeMount(async () => {await getData() });const getData = async () => {data.value = await service(attrs.data.url);}return data;
}

// component

<template><!--省略 -->
</template>
<script setup lang="ts">
import useData from '@/hook/useData';const data = useData();

这篇关于vue3 useAttrs的使用场景，提取共有props的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---