Vue.js vuejs-使用带有徽章计数的ivew选项卡

我正在参考文件来分配标签的徽章数量

我的HTML：

 <Tabs>
 <TabPane :label="label">
    Some Components here
 </TabPane>
 <Tabs>

这里有一些组件

还有我的JS：

<script>
import { Tabs, TabPane, Badge } from "iview";

export default {

  components: {
    Tabs,
    TabPane,
    Badge
  },
  data() {
    return {

      label: (h) => {
        return h("div", [
          h("span", "Result"),
          h("Badge", {
            props: {
              count: 5
            }
          })
        ]);
      }
    };
  }

从“iview”导入{Tabs，TabPane，Badge}；
导出默认值{
组成部分：{
标签，
选项卡窗格，
徽章
},
数据（）{
返回{
标签：（h）=>{
返回h（“div”[
h（“跨度”、“结果”），
h（“徽章”{
道具：{
计数：5
}
})
]);
}
};
}

但我不断收到错误

[Vue warn]：未知自定义元素：Badge-是否正确注册了组件？对于递归组件，请确保提供“名称”选项

---

我遵循的代码与示例中的代码完全相同，但我不确定发生错误的原因。

要回答您的第一个问题，问题是您引用了

“Badge”

在渲染函数中，这意味着Vue将查找该名称的全局注册组件。您需要的是使用本地注册组件

h（徽章、{
道具：{
计数：5
}
})

---

至于你在评论中的问题

我是否可以通过组件内的方法修改徽章计数值

是的，我想是的。您所需要做的就是注册一个数据属性，您可以通过方法或其他方式修改它。例如

数据（）{
返回{
计数：5，//初始值，
标签：h=>h（'div'[
h（'span'，'Result'），
h（徽章{
道具：{
伯爵：这个，伯爵
}
})
])
}
},
方法：{
递增计数（）{
这个，伯爵++
}
}

---

注意：我使用了一些非常简单的组件来测试它，所以我不能100%确定它是否能与iview组件一起工作。

删除

“Badge”

，即

h（Badge，{道具…

@Phil u r my life savior！我为此花了半天时间！！！非常感谢！！！！不客气。以下是有关

createElement

（又名

h

）的相关文档function ~@Phil Hi我有一个额外的问题，我是否可以从组件内的方法修改徽章

计数

值？我现在真的不确定。你基本上是在追求反应道具，但我不确定如何通过渲染功能实现这一点