vue渲染自定义组件的坑-20190326

vue渲染自定义组件的坑

• 创建一个自定义组件
• 在父组件使用render h函数渲染
• 页面报错
• 解决
• 总结

创建一个自定义组件

<template>
  <ul class="h-tag-close-tip">
    <li v-for="item in contextMenuData.menulists" :key="item.optionName" class="h-tag-close-tip-item" @click.stop.prevent="fnHandler(item)">
      <h-icon :name="item.iconName"></h-icon>
      <span>{{item.optionName}}</span>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'ContextMenu',
  data () {},
  props: {
    contextMenuData: {
      [...]
    }
  },
  methods: {
    fnHandler (item) {
      this.$emit(item.fnHandler)
    }
  }
}
</script>

<style scoped>

</style>

在父组件使用render h函数渲染

import ContextMenu from '../../../components/ContextMenu'
export default {
  name: 'sqlDev',
  components: {
    ContextMenu,
    ....
  }

h(‘ContextMenu’, {
          props: {
            contextMenuData: self.contextMenuData
          },
          style: {
            width: '80px',
            height: '60px'
          },
          on: {
            savedata () {
              alert(self.selectScript.entity.uuid)
            },
            newdata () {
              alert('new')
            }
          }
        })

页面报错

Unknown custom element: <ContextMenu> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决

去掉h函数参数中的引号(对比上图)

总结

h函数渲染一般的html元素，如div span等，需要加引号，但渲染自定义组件时，直接是应用组件引用即可