vue.js - 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 一起使用。