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

最新推荐文章于 2025-06-15 18:38:47 发布

rookie_zfy

最新推荐文章于 2025-06-15 18:38:47 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/zfy_rookie/article/details/88826268

学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue中创建自定义组件并使用父组件的render h函数进行渲染时遇到的问题，包括页面报错的详细情况。通过分析，找到了问题的解决方法，即在调用h函数时去除参数中的引号，以正确地渲染自定义组件。

vue渲染自定义组件的坑

创建一个自定义组件

创建一个自定义组件

<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等，需要加引号，但渲染自定义组件时，直接是应用组件引用即可