vue 插槽

动态插槽名

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

---

目录

动态插槽名

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

二、解决办法

避免使用大写命名

---

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

 

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>
    `
});

---