vue 插槽v-slot

最新推荐文章于 2023-09-08 17:09:03 发布
最新推荐文章于 2023-09-08 17:09:03 发布
阅读量281 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/102967266
版权

文章目录

插槽的作用

组件的插槽也是为了让我们封装的组件更加具有扩展性

基本使用

展现组件标签内部的内容（包括标签）
插槽内容要在组件标签内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-slot</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <box-cs>
            <h1>Something bad happened.</h1><!-- slot内容来源 -->
        </box-cs>
        <!-- slot展现组件内部的内容包括html节点 -->
    </div>
    <script>
        Vue.component('box-cs',{
            template:`<div>
                    <slot></slot>
            </div>`
        })
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

在这里插入图片描述

默认内容

只会在组件内部没有提供内容的时候被渲染

<box-cs></box-cs>

Vue.component('box-cs',{
    template:`<div>
            box-cs
            <slot>默认内容</slot>
    </div>`
})

具名插槽 多个插槽使用

一个不带 name 的 出口会带有隐含的名字“default”。
任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。

在组件里面
v-slot 只能用于 template 标签

<template v-slot:header></template>

<template slot:header></template>

<div slot:header></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-slot</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <base-layout>
            <template v-slot:header>
                <h1>header 插槽内容</h1>
            </template>

            <!-- <h1>默认插槽内容</h1> -->
            <!-- 或 -->
            <template v-slot:default>
                <h1>默认插槽内容</h1>
            </template>

            <template v-slot:footer>
                <h1>footer 插槽内容</h1>
            </template>
        </base-layout>
    </div>
    <script>
        Vue.component('base-layout',{
            template:`<div>
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <main>
                        <slot></slot>
                    </main>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>
            </div>`
        })
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>
具名插槽的缩写

只能用于 template 标签

<div id="app">
   <base-layout>
       <template #header>
           <h1>header 插槽内容</h1>
       </template>
       <template #footer="data"> <!--或 #footer="{data}"-->
           <h1>footer 插槽内容</h1>
           <!--data { title:'footer', msg:'footer is msg' }-->
           {{data}}
       </template>
   </base-layout>
</div>

Vue.component('base-layout',{
	data(){
		return{
			footer:{
                title:'footer',
                msg:'footer is msg'
            }
		}
	},
    template:`<div>
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot></slot>
            </main>
            <footer>
                <slot name="footer" :footer="footer"></slot>
            </footer>
    </div>`
})
new Vue({
    el:"#app",
})

作用域插槽

插槽默认内容 数据展示
<div id="app">
	<base-layout>
	</base-layout>
</div>
Vue.component('base-layout',{
   data(){
       return{
           user:'userdata',
           age:18
       }
   },
   template:`<div>
          <slot>{{user}}{{age}}</slot>
   </div>`
})
new Vue({
   el:"#app",
})
插槽模版传参

父组件替换插槽的标签，但是内容由子自己提供

<div id="app">
	<base-layout>
		<template v-slot:default="user">
           <h1>默认插槽内容</h1>
           <!-- user:{ "user": "userdata"} -->
           {{ user.user }}
        </template>
	</base-layout>
</div>
Vue.component('base-layout',{
   data(){
       return{
           user:'userdata',
           age:18
       }
   },
   template:`<div>
           <slot :user="user"></slot>
   </div>`
})
new Vue({
   el:"#app",
})
多个参数
<div id="app">
    <cpn></cpn>
    <cpn>
        <div slot-scope="slot">
            {{slot.list.join(' -- ')}}
        </div>
    </cpn>
    <cpn>
        <!-- 2.5 以前必须用template标签 -->
        <template v-slot:default="data">
            {{data}}
        </template>    
    </cpn>
    <cpn>
        <template v-slot="data">
            {{data}}
        </template>    
    </cpn>
</div>

<template id="tmp">
    <div>
        <!-- 默认列表 -->
        <slot :list="plist,name">
            <ul>
                <li v-for="(item,i) in plist">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script>
    const cpn = {
        template:'#tmp',
        data(){
            return {
                plist:['aaa','xxx','javascript','java'],
                name:"组件"
            }
        }
    }
    const app = new Vue({
        data:{

        },
        components:{cpn},
        methods:{}
    }).$mount("#app")
</script>

在这里插入图片描述

被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用

只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法 即具名插槽写法

<div id="app">
	<base-layout v-slot:default="data">
	{{ data}}
	</base-layout>
	<!--或-->
	<!--<base-layout v-slot="data">
	{{ data}}
	</base-layout>-->
</div>

Vue.component('base-layout',{
   data(){
       return{
           user:'userdata',
           age:18
       }
   },
   template:`<div>
           <slot :user="user,age"></slot>
   </div>`
})
new Vue({
   el:"#app",
})

在这里插入图片描述

解构插槽 Prop
<div id="app">
	<base-layout>
		<template v-slot:default="{user,age,sex={name:'ff'}}">
           <h1>默认插槽内容</h1>
           {{ user }} {{user}}
        </template>
	</base-layout>
</div>
Vue.component('base-layout',{
   data(){
       return{
           user:'userdata',
           age:18
       }
   },
   template:`<div>
           <slot :user="user,age"></slot>
   </div>`
})
new Vue({
   el:"#app",
})

动态插槽名

<div id="app">
    <base-layout ff="header">
        <template #[header]>
            <h1>header 插槽内容</h1>
        </template>
    </base-layout>
</div>

Vue.component('base-layout',{
	props:['ff'],
    data(){
        return{
            user:'userdata',
            age:18
        }
    },
    
    template:`<div>
            <header>
                <slot :name="ff"></slot>
            </header>
    </div>`
})
new Vue({
    el:"#app",
    data:{
        header:'header'
    }
})
tianmeng1999
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022/9/2 动态组件，插槽初识(v-slot)指定渲染
weixin_54534229的博客
09-02 403
component专门用来渲染动态组件的渲染，keep-alive 保持存在不被销毁，插槽的#v-slot:方法
vue中的插槽--slot和v-slot
热门推荐
时清云的博客
04-25 1万+
今天团队内部有一个技术分享会，主要是vue进阶这一块，我对插槽slot的认识还不清晰，于是就总结一下 什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 怎么用插槽？ 1.默认插槽 子组件(slotOn......
Vue中的插槽v-slot
m0_59345890的博客
09-06 397
插槽是在创建组件时设定的一块位置，在后面组件导入注册使用时，在组件标签中写传入设定的那块位置的信息。所以使用插槽，组件必须使用双标签。插槽可以分为默认插槽（没有设置插槽名）和具名插槽（设置了插槽名），使用具体使用那种插槽呢？当组件中只有一个插槽时，就可以用默认插槽，因为传入的数据都在其中；但是如果设置了多个插槽就需要使用具名插槽，插入数据时通过插槽名选择插入那个位置。
Vue中的v-slot详解，作用域插槽和具名插槽
最新发布
細水、長流√的专栏
09-08 921
v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。Vue中的v-slot详解，作用域插槽和具名插槽_屈小康的博客-CSDN博客。
VUE v-slot详解 作用域插槽与具名插槽
sssssnmmm的博客
07-27 181
v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。
router-view v-slot=“{ Component }“
qq_47247479的博客
03-27 5510
router-view v-slot="{ Component }"
vue中的插槽v-slot
Summer_JK的博客
10-15 383
vue中的插槽v-slot 今天也是第一次真正用到过插槽这个知识点，下面就大概说下用法 先来看看插槽模板： 子组件（在子组件中定义slot标签，添加name属性） <template> <div> <slot name="header"></slot> //注意这里的name属性 </div> </template> 父组件（在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置） 跟
详解vue2.6插槽更新v-slot用法总结
12-09
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。 引vue官方文档 之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单...
Vue-组件-插槽v-slot
u011360133的专栏
05-30 3307
看Vue文档整理笔记，便于自己学习 插槽 插槽内容 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自Web Components 规范草案，将<slot>元素作为承载分发内容的出口。 它允许你像这样合成组件： <navigation-link url="/profile"> Your Profile </navigati...
Vue中v-slot、插槽详解（看完这篇插槽对你来说很简单）
子时不睡的博客
09-27 8866
目录不使用插槽默认插槽具名插槽作用域插槽动态插槽名和具名插槽的缩写 不使用插槽 领导让小睡做一个小样式，那就用这个小案例作为引入， 看看在不使用插槽的时候、使用插槽时候的区别。下次就知道什么时候使用插槽能更方便了。 看到上面的样式，首先会想到使用组件，然后再App.vue中把标题和内容数据传给子组件即可。 样式的代码没展示，完整代码在最后 <!-- category组件--> <template> <div class="category"> <h3
vue v-slot指令
qq_45862085的博客
08-04 4267
在Vue中， v-slot 指令用于定义插槽的模板内容。它用于在父组件中传递内容到子组件中的插槽。v-slot 指令可以用于 标签或组件标签上，以便在子组件中使用插槽。
Vue插槽v-slot的详细教学大全（Ι）
sky89299的博客
04-14 1219
组件-插槽 插槽 作用：通过slot标签，让组件可以接收不同的标签结构显示 语法 组件内用<slot></slot>占位 使用组件时<Pannel></Pannel>夹着的地方，传入标签替换slot ## 插槽-默认内容 0. 作用： 如果外面没有传值，可以给个默认显示内容 0. 语法：<slot>放置内容，作为默认显示内容 0. 效果： - 不给组件传标签，slot内容原地显示 - 给组件内传标
Vue--插槽(v-slot)--使用/教程/实例
IT利刃出鞘的博客
11-07 1万+
原文网址： 简介 说明 本文用示例说明Vue的插槽（v-slot）的用法。包括：普通插槽，作用域插槽等。 官网 插槽 — Vue.js 普通插槽 说明 vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope，这两个在vue2.6.x中已被废弃但未被移除。vue 3 中， slot 和 slot-scope会被直接移除。 写法 v-slot有不同的写法。 具名插槽 父组件：&...
【vue】6、component和keep-alive、slot插槽、自定义vue指令
m0_46661713的博客
09-07 248
component keep-alive slot 自定义指令 directives
React组件
DingDing_Zhang的博客
09-17 2370
React组件 组件的三种写法 改变state值 v-if 和 v-for 的底层写法
vue3使用keep-alive组件，包含动态组件使用
qq_23858785的博客
05-10 3293
vue3使用keep-alive组件，包含动态组件使用
Vue插槽slot使用
bangbDIV的博客
01-04 387
1.匿名插槽 // 子组件 Child1 <div> <slot></slot> // 此时插槽区域内显示文案hello </div> // 父组件 <Child1>hello</Child1> 2.具名插槽 用途：让内容显示到组件内的指定位置 // 子组件 Child1 <div> <slot></slot> // 显示默认的插槽 <slot name="
vue中slot和v-slot使用
monthover的博客
04-02 1637
默认slot <li> {{value}} <button @click="deleteAction"> <slot>删除</slot> </button> </li> <ul> <Item v-for="(item, index) in dataSource" :key="inde...
Vue-几种插槽(slot)的使用
见证自己学习,成长的记录
06-22 1万+
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值