问题描述
[问题描述：尽可能简洁清晰地把问题描述清楚]
小程序环境下，通过属性透传传递的class @click等attr给子组件，子组件里获取不到
[或者可以直接贴源代码]
-src/components/BtnCustom/BtnCustom.vue
<template>
<button>
<slot />
</button>
</template>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<script setup lang="ts">
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log('attr', attrs)
</script>-src/pages/index/index.vue
<template>
<BtnCustom class="btn" name="123" @click="doCalc"><text>index</text></BtnCustom>
</template>
<script setup lang="ts">
import BtnCustom from '@/components/BtnCustom/BtnCustom.vue'
function doCalc() {
console.log(1 + 3)
}
</script>
<style scoped>
.btn {
background-color: aqua;
}
</style>预期结果
[使用简洁清晰的语言描述你希望生效的预期结果]
attrs中能取到class以及onClick
实际结果
[这里请贴上你的报错截图或文字]
attrs只有name的键值
系统信息:
- 发行平台:微信小程序
- 操作系统 windows
- uni-app版本 3.0.0-3061520221228001
- 设备信息 微信开发者工具
补充信息
[可选]
[根据你的分析，出现这个问题的原因可能在哪里？]
透传name的attr给子组件时能获取到，class onClick却不能，是否对这些特殊的attr做了过滤的处理
5条答案
按热度按时间w8ntj3qf1#
目前 Vue 组件到小程序组件传递的纯数据类型，使用的 JSON 来转换，后续会考虑深克隆等方式。
1tuwyuhd2#
目前 Vue 组件到小程序组件传递的纯数据类型，使用的 JSON 来转换，后续会考虑深克隆等方式。
你的意思是属性透传过去是function这类json无法转换的数据就会丢掉这个属性？这样的话我class透传过去的是一个字符串，按理不应该在json转换中丢失才对吧
hjzp0vay3#
我又通过其他途径试了下，感觉并不是因为传入数据无法被json格式化的问题，感觉就是特殊键值会被忽略掉或者特殊处理。因为我放弃透传属性，完全通过props传的时候，class onClick这两个属性也还是undefined。当修改为其他键名比如handle的时候,function类型的props也能出传进去，属性透传也能传进去，均能被正常调用。
rslzwgfq4#
我也遇到了这个问题 class 和style不行
7xllpg7q5#
有这个设置吗？