这篇文章主要介绍了vue架构插槽slot如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue架构插槽slot如何使用文章都会有所收获，下面我们一起来看看吧。

新建组件 Article

<template><div>日期:2022-01-15<slot></slot></div></template>

新建 Learn，并在 Learn 中使用 Article

Learn.vue 和Article.vue 在同一文件夹下

<template><div><Article><div>送郎八月到扬州,长夜孤眠在画楼。女子拆开不成好,秋心合着却成愁</div></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>

slot 相当于把 div 插入到 Article 中 slot 位置

运行效果

即使用 slot 时，不传入会显示默认的内容，传入则使用传入的内容

如不设置默认值，则不显示任何内容，代码如下

先看不设置默认值的情况

Article 内容

<template><div>日期:2022-01-15<slot></slot></div></template>

Learn 内容

<template><div><Article></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>

运行效果

设置默认值

Article 内容

<template><div>日期:2022-01-15<slot><div>醉眠芳树下,半被落花埋</div></slot></div></template>

Learn 内容

<template><div><Article></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>

运行效果

Article 内容

<template><div><slotname="title"></slot>日期:2022-01-15<slotname="content"></slot></div></template>

Learn 内容

<template><div><Article><templatev-slot:title><div>窗前【作者】赵崇嶓</div></template><templatev-slot:content><div>窗前寻丈地,种得一株梅。明月清风我,红尘不复来。</div></template></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>

通过给 slot 标签设置 name 属性值，并通过v-slot 来对应

运行效果

v-slot:title 可以简写为#title，代码如下

<template><div><Article><template#title><div>窗前【作者】赵崇嶓</div></template><template#content><div>窗前寻丈地,种得一株梅。明月清风我,红尘不复来。</div></template></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>4、作用域插槽

父级插槽使用子组件中的数据

Article 内容

<template><div>日期:2022-01-15<slotv-bind:article="article"><div>{{article.content1}}</div></slot></div></template><script>exportdefault{data(){return{article:{content1:'从别后，忆相逢。几回魂梦与君同',content2:'今宵剩把银釭照，犹恐相逢是梦中'}}}}</script>

Learn 内容

<template><div><Article></Article><Article><templatev-slot:default="slotProps">{{slotProps.article.content2}}</template></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>

运行效果

看上下2个 Article 显示的区别，上边显示的是 content1，下边显示的是content2

上面代码v-slot:default="slotProps" 可以简写成v-slot="slotProps"

简写后的代码

<template><div><Article></Article><Article><templatev-slot="slotProps">{{slotProps.article.content2}}</template></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>

解构插槽 Prop

在支持的环境下 (单文件组件或现代浏览器)，可以使用 ES2015 解构传入具体的插槽 prop

代码如下

<template><div><Article></Article><Article><templatev-slot="{article}">{{article.content2}}</template></Article></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article}}</script>5、动态插槽名

Article 内容

<template><div><slotname="title"></slot>日期:2022-01-15<slotname="content"></slot></div></template>

Learn 内容

<template><div><Article><templatev-slot:[dynamicSlotName]><div>身无彩凤双飞翼,心有灵犀一点通</div></template></Article><button@click="changeSlotName">改变插槽名</button></div></template><script>importArticlefrom'./Article.vue'exportdefault{components:{Article},data(){return{dynamicSlotName:'title'}},methods:{changeSlotName(){this.dynamicSlotName='content'}}}</script>

运行效果

关于“vue架构插槽slot如何使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue架构插槽slot如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。