ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue slot 后备内容无法显示问题,并且还显示undefined问题

2022-04-30 18:31:15  阅读:413  来源: 互联网

标签:slot vue undefined vm template ._ var compiler


vue slot 后备内容无法显示问题

issus: https://github.com/vuejs/vue/issues/12153

原因 vue > 2.6.12 调整了slot组件的编译内容

示例代码

<template>
    <div>
        <slot>Hello World</slot>
    </div>
</template>

编译后模板是

vue-template-compiler = 2.6.12 编译结果

var HelloWorldvue_type_template_id_1f0af232_render = function () {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c('div', [_vm._t("default", [_vm._v(" HelloWorld ")])], 2)
}

vue-template-compiler = 2.6.14 编译结果

var HelloWorldvue_type_template_id_1f0af232_render = function () {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c('div', [_vm._t("default", function () {
        return [_vm._v(" HelloWorld ")]
    })], 2)
}

要注意 vue 与 vue-template-compiler 版本一致,主要原因是 vue 中 renderSlot 方法 调整,在 v2.6.13 版本,renderSlot 第二个参数支持 函数类型,同时 vue-template-compiler 编译slot 返回一个函数,但是v2.6.12 版本,renderSlot 第二个参数只是VNode,同时 vue-template-compiler 编译slot 直接返回一个VNode。因此如果 vue-template-compiler 版本比vue 版本高,就会出现这种情况。

注意如果是发布组件库,引用组件库的项目要和依赖库编译模板一致,如果项目使用vue-template-compiler@2.6.14,组件库依赖的vue-template-compiler@2.6.12,就会出现无法识别后备内容的情况

标签:slot,vue,undefined,vm,template,._,var,compiler
来源: https://www.cnblogs.com/iPing9/p/16210898.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有