vue 疑难杂症记录

一、render 函数渲染自定义组件注意的问题

一般使用vue render函数渲染普通的html标签时，写法如下：

render: (h) => {
   return ('div', {}, '测试内容')
}

但是有时候我们需要使用render渲染自定组件这时候就不应该在自定义的组件名上加“”号了，
写法如下：

render: (h) => {
	return (ToolBarButton, {})
}

这里假设自定义组价为ToolBarButton，加上引号后，系统一直会提示组件未注册。

二、当组件需要接受用户定义的class类名时

例如有个自定义的icon组件，它有props属性需要接收真正的类名，用来选软各种各样的组件，代码如下：

<template>
  <div class="global-tool-bar">
    <Tooltip :content="buttonTip" placement="top" theme="light" transfer :delay="tipDelayTime">
      <Icon :color="iconColor" :class="{iconBarClass: true, 'tool-bar-button': !disableDefaultOffset}" @click.native="onToolBarClick" :type="iconType" :size="iconSize"  />
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: 'toolbar-button',
  props: {
    buttonTip: { type: String, default: '' },
    iconBarClass: { type: String, default: '' },
    iconType: { type: String, default: '' },
    actionName: { type: String, default: 'toolButton' },
    tipDelayTime: { type: Number, default: 700 },
    iconColor: { type: String, default: '' },
    disableDefaultOffset: { type: Boolean, default: false },
    iconSize: { type: Number | String, default: '' }
  },
  methods: {
    onToolBarClick () {
      this.$emit('on-toolbar-click', this.actionName)
    }
  }
}
</script>

这里类名使用:class={iconBarClass:true}的方式传入，vue选软时会把iconBarClass当做一个字符串对应的类名直接渲染，而不是把这个变量对应值的内容进行渲染，这样导致我们的类失效。
解决办法： 提供一个计算属性，返回变量iconBarClass的值的内容作为vue真正要渲染的class，改动后如下：

<template>
  <div class="global-tool-bar">
    <Tooltip :content="buttonTip" placement="top" theme="light" transfer :delay="tipDelayTime">
      <Icon v-if="!customer" :color="iconColor" :class="customerClass" @click.native="onToolBarClick" :type="iconType" :size="iconSize"  />
      <i v-if="customer" :class="customerClass" @click.native="onToolBarClick"></i>
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: 'toolbar-button',
  props: {
    buttonTip: { type: String, default: '' },
    iconBarClass: { type: String, default: '' },
    iconType: { type: String, default: '' },
    actionName: { type: String, default: 'toolButton' },
    tipDelayTime: { type: Number, default: 700 },
    iconColor: { type: String, default: '' },
    disableDefaultOffset: { type: Boolean, default: false },
    iconSize: { type: Number | String, default: '' },
    customer: { type: Boolean, default: false }
  },
  computed: {
    customerClass () {
      return [
        { 'tool-bar-button': !this.disableDefaultOffset },
        { [this.iconBarClass]: !!this.iconBarClass }
      ]
    }
  },
  methods: {
    onToolBarClick () {
      this.$emit('on-toolbar-click', this.actionName)
    }
  }
}
</script>
``