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

Question

我指的是文档 http://v3.iviewui.com/components/tabs-en 为选项卡分配徽章数。

我的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
            }
          })
        ]);
      }
    };
  }

但我一直收到错误消息

[Vue warn]: Unknown custom element: Badge - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我正在遵循示例中完全相同的代码，但我不确定为什么会发生错误。

Answer 1

要回答您的第一个问题，问题是您在渲染函数中引用了 "Badge"，这意味着 Vue 将寻找该名称的全局注册组件。你想要的是使用本地注册的组件

h(Badge, {
  props: {
    count: 5
  }
})

关于您在评论中提出的问题...

am I possible to modify the badge count value from a method within the component ?

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

data () {
  return {
    count: 5, // initial value,
    label: h => h('div', [
      h('span', 'Result'),
      h(Badge, {
        props: {
          count: this.count
        }
      })
    ])
  }
},
methods: {
  incrementCount () {
    this.count++
  }
}

_{注意：我使用一些非常简单的组件对此进行了测试，所以我不能 100% 确定它是否适用于 iview 组件。}

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

vuejs - using ivew tab with badge count

vue.js

iview