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

【问题标题】：vuejs - using ivew tab with badge countvuejs - 使用带有徽章计数的 ivew 选项卡
【发布时间】：2019-12-09 07:36:50
【问题描述】：

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

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

【问题讨论】：

去掉"Badge"周围的引号，即h(Badge, { props...
@Phil 你是我的救星！我为此花了半天时间！！！非常感谢！！！！
不客气。这是createElement（又名h）函数的相关文档~vuejs.org/v2/guide/render-function.html#createElement-Arguments
@Phil 您好，我有一个额外的问题，我可以从组件中的方法修改徽章count 值吗？
现阶段我真的不确定。您基本上是在使用响应式道具，但我不确定如何使用渲染功能来实现这一点

标签： vue.js iview

【解决方案1】：

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

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

至于你的问题来自cmets...

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

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

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 组件。}

【讨论】：