当前位置: 首页 > Web前端 > vue.js

[Vue]说说vue的slot语法01

时间:2023-03-31 20:18:36 vue.js

slot语法有新旧版本。建议大家阅读新版语法,不要阅读旧语法,以免混淆新旧语法。以下代码的文本部分使用新语法进行演示。首先是匿名槽(Defaultslot)和命名槽(Namedslots)。我这里加上定义两个名词,方便后面解释。1.分发处-分发区留空,等待内容填写2.使用地点-使用地点放置text/html,使用地点的内容会填入该地点分布。Anonymousslot(Defaultslot)如果只需要一个分发点,此时可以使用anonymousslot。匿名槽是默认槽,使用的内容会放在默认槽的位置。然后可以直接在模板中(Panel.vue中)添加一个标签(标签是分发的入口)。↓Panel.vuetitle

(匿名插槽,分布)
更多信息
就是这样。使用时直接在组件标签(..here..)中输入要插入的内容即可。helloslot(这里是使用的地方)helloslot会出现在上面分布的位置。注意:标签在html中不存在。命名槽(Namedslots)如果有多个分布位置(需要多个位置放置内容),那么需要区分每个分布位置的名称(给槽添加名称),这时就需要使用named插槽。槽。具体方法是在模板中(Panel.vue中)添加solt标签,并赋予其name属性。↓Panel.vue我是默认值//分配时的默认值<使用/div>时,将放在组件标签中需要使用slot的位置().注意:此要求与插槽的旧语法中的插槽属性不同。slot属性所在的标签可以是

期待更多template>

↑注意:(用到的地方)写两个v-slot:s1比如嘿嘿哈哈那么这两个内容会同时出现在name='s1'的slotdistribution中。设置默认值(我是默认值),作为占位符我是默认值上面代码块的作用是用“我是默认值”作为占位符。当没有xxx时,分配处出现“我是默认的”。↓出现这段代码时,slot的内容为空白(占位符“我是默认值”换成空白)补充:新旧语法区别新语法(用在什么地方)旧语法(用在什么地方)同步更新到你的自己的语言麻雀https://www.yuque.com/diracke...