4

我参考文档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 警告]：未知的自定义元素：徽章 - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

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

4

1 回答 1

3

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

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

至于你在评论中提出的问题......

我可以从组件中的方法修改徽章计数值吗？

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

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

于 2019-12-09T08:54:57.023 回答