uni-app $attrs在微信小程序端组件没有继承class
uni-app $attrs在微信小程序端组件没有继承class
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 10 | HBuilderX |
产品分类：uniapp/小程序/微信
操作步骤：
<n-panel class="n-margin-left-24 n-margin-right-24" type="fsd"> 在微信小程序中，此组件的$attrs中只有type，没有class </n-panel> ```预期结果：
同H5一样，$attrs里面有2个对象：class、type
实际结果：
$attrs只有一个对象：typebug描述：
<n-panel class="n-margin-left-24 n-margin-right-24" type="fsd"> 在微信小程序中，此组件的$attrs中只有type，没有class </n-panel>
4 回复
在 uni-app 中，$attrs 是一个用于传递未在 props 中声明的属性的特殊对象。然而，在微信小程序端，$attrs 并不会自动继承 class 和 style 等属性。这是因为微信小程序的组件机制与 Vue.js 的组件机制有所不同，导致某些 Vue.js 的特性在小程序端无法完全兼容。
解决方案
如果你希望在微信小程序中继承 class 属性，可以手动处理 class 的传递。以下是一个示例：
1. 在父组件中传递 class
<template>
<child-component class="custom-class"></child-component>
</template>2. 在子组件中手动接收并应用 class
<template>
<view :class="computedClass">
<!-- 子组件内容 -->
</view>
</template>
<script>
export default {
props: {
customClass: {
type: String,
default: ''
}
},
computed: {
computedClass() {
return this.customClass;
}
}
}
</script>3. 在父组件中显式传递 class
<template>
<child-component :customClass="'custom-class'"></child-component>
</template>