vue 插槽

最新推荐文章于 2024-09-14 13:43:15 发布

ly_zszcyx

最新推荐文章于 2024-09-14 13:43:15 发布

阅读量487

点赞数

分类专栏：前端文章标签： vue.js Vue插槽

本文链接：https://blog.csdn.net/qq_41722795/article/details/120057678

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文讨论了在Vue.js中使用动态插槽名时遇到的报错问题，即Vue警告属性或方法'dynamicslotname'未在实例上定义。原因在于浏览器将动态插槽名自动转为小写导致。解决方法是避免使用大写命名，确保插槽名在数据选项中声明或在类组件中初始化。示例代码展示了如何创建一个包含动态插槽名的组件。

摘要由CSDN通过智能技术生成

动态插槽名

使用官网示例动态插槽名的报错

一、使用官网动态插槽名报错

vue.js:634 [Vue warn]: Property or method "dynamicslotname" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

浏览器将其全部转换为小写

二、解决办法

避免使用大写命名

Vue.component('custom-slot-dynamic-name',{
    data:function(){
        return {

        }

    },
    template:`
    <div>
        <slot name="customDynamicName1">默认值</slot>
        <slot name="customDynamicName2"></slot>
        <slot name="customDynamicName3"></slot>
    </div>
    `
});