十三、插槽

最新推荐文章于 2024-06-11 20:47:04 发布
最新推荐文章于 2024-06-11 20:47:04 发布
阅读量278 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44023101/article/details/105935449
版权

插槽

（1.）插槽内容
    <template id="componentThree">
        <p>
	        我是子组件模板
	        <slot></slot>
        </p>
    </template>
    <div id='app'>
        <component-three :title = 'doc.title'>
            <h1>{{doc.title}}</h1>
        </component-three>
    </div>
    
    <script>
       var ComponentC = {
            props:['title'],
           data:function(){
               return {}
           },
           template:"#componentThree"
       }
       new Vue({
           el:'#app',
            data:{
                doc:{
                    title: "我是插槽的内容"
                    }
            },
            components:{
                'component-three':ComponentC
            }
       })
    </script>
  • 只要在子组件模板中加入<slot></slot>标签，就可以在使用子组件时在其中加入任何模板代码，vue都会将其渲染出来，如果不加则无论输入什么都不会出来。
  • 子组件模板中加入<slot></slot>标签，如下：加入插槽标签
  • 子组件模板中不加<slot></slot>标签，如下：不加插槽标签
    总之一句话加了一切好说，不加耶稣也救不了它。
（2.）编译作用域
  • 当你想在一个插槽中使用数据时，它是不能访问自组件的作用域的，比如上面的代码中插入的元素如果想使用<component-three :title = 'doc.title'>中的title它是访问不到的。
  • vue规则：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

（3.）后备内容
  • 它只在子组件中没有插入任何内容时会被渲染，例：
    <template id="componentThree">
        <div>
            <p>happy day!!</p>
            <slot>插槽后备内容</slot>
        </div>
    </template>
    <div id='app'>
        <component-three :title = 'doc.title'>
        </component-three>
    </div>
    
    <script>
       var ComponentC = {
            props:['title'],
           data:function(){
               return {}
           },
           template:"#componentThree"
       }
       new Vue({
           el:'#app',
            data:{
                doc:{
                    title: "我是插槽的内容"
                    }
            },
            components:{
                'component-three':ComponentC
            }
       })
    </script>
  • 没有向子组件中插入任何内容：子组件中没有插入任何内容
  • 如果子组件中插入一个<h1>标签：插入后，内容改变
（4.）具名插槽
  • 有时需要实现多个插槽分块插入的需求，插入的内容有相对应的模块，对此<slot>标签中有name属性，这个属性可以用来定义额外的插槽，例：
<template id="componentThree">
        <div>
            <p>happy day!!</p>
            <slot name="head">我是头部插槽</slot>
            <slot name="foot">我是尾部插槽</slot>
        </div>
    </template>
    <div id='app'>
        <component-three :title = 'doc.title'>
           <h1 slot="foot">one two three!!</h1>
           <h4 slot="head">we have time</h4>
        </component-three>
    </div>

    <script>
       var ComponentC = {
            props:['title'],
           data:function(){
               return {}
           },
           template:"#componentThree"
       }
       new Vue({
           el:'#app',
            data:{
                doc:{
                    age:45,
                    title: "我是插槽的内容"
                    }
            },
            components:{
                'component-three':ComponentC
            }
       })
    </script>
  • 子组件插入的元素通过slot name的属性用slot="name"来匹配对应的插槽。
（5.）具名插槽v-slot(船新版本)
  • 上面使用的 slot="xx"，在在2.6.0+ 中已弃用。
  • 新版v-slot注意事项：
  • (1.) 匿名插槽在新语法下，默认指向default ,例：v-slot:default
  • (2.) 在旧版本中slot="xxx"的情况下，可以挂载在非 template标签上，如：<h1 slot="foot">one two three!!</h1>，新版中必须使用<template>标签，如：<template v-slot:foot>one two three!!</template>
  • (3.)v-slot:tit可缩写为#tit
<!--用新的v-slot替换旧的slot="xx"-->
 <div id='app'>
        <component-three :title = 'doc.title'>
           <template v-slot:foot>one two three!!</template>
           <template v-slot:head>we have time</template>
        </component-three>
    </div>
（6.）作用域插槽（slot-scope废弃）
  • 作用：父组件访问子组件内部数据.
  • (6.1) 废弃的 slot-scope的作用域插槽：
    + 1. 语法：slot-scope="slotProps"
    + 2. 例：
<template id="componentThree">
        <div>
            <slot name="footer" :msg="msg"></slot> 
             <slot slot="headed">今天天气很不错！！！</slot>
        </div>
    </template>
    <div id='app'>
        <component-three>
           <div slot='footer' slot-scope="slotProps">
            {{slotProps.msg}}
           </div>
           <h1 name='headed'></h1>
        </component-three>
    </div>
    
   
    <script>
       var ComponentC = {
            props:['title'],
           data:function(){
               return {
                   msg: 'fffffff'
               }
           },
           template:"#componentThree"
       }
       new Vue({
           el:'#app',
            data:{
                doc:{
                    age:45,
                    title: "我是插槽的内容",
                    msg:'hahahahah'
                    }
            },
            components:{
                'component-three':ComponentC
            }
       })
    </script>
  • 在slot元素上任意定义一个属性，如msg，在使用子组件时添加slot-scope属性如slot-scope="slotProps"（slotProps可为任意名字）接着显示，{{slotProps.msg}}发现出现了在子组件定义的msg的值。
  • 这样插槽就可以使用父组件的值。
  • 在子组件中放入父组件想让显示的内容。
  • 例：
<template id="componentThree">
<div>
	<ul>
		<li v-for="items in personDate">
			<slot name="footer" :item="items"></slot>
		</li>
	</ul>
</div>
</template>
<div id="app">
	<component-three :person-date="personDate">
		<div slot="footer" slot-scope="slotProps">
			{{slotProps.item.id}}--{{slotProps.item.name}}--{{slotProps.item.sex}}
		</div>
	</component-three>
</div>
<script>
var componentC = {
	props:["personDate"],
	data:function(){
		return {}
},
	template:"#componentThree"
}
new Vue({
	el:"#app",
	data:{
	personDate:[
		{id:1,name:'花花',sex:'女',age:18},
        {id:2,name:'小明',sex:'男',age:32},
        {id:3,name:'小红',sex:'女',age:45},
        {id:4,name:'小李',sex:'男',age:12},
        {id:5,name:'小黄',sex:'女',age:24},
        {id:6,name:'伟伟',sex:'男',age:67}
		]
	},
	components:{
		"componentThree":componentC
	}
})
</script>
  • 以上为完整的父子元素传递代码：主要流程
  • 1. 父组件将自身数据通过props传递给子组件。
  • 2. 子组件将数据传给插槽，并暴露给父组件接口，如：:item="items"
  • 3.父组件调用子组件的插槽slot接口和数据,如：slot-scope="slotProps"
（7.）作用域插槽（船新版本）
<!--主要变化在子组件使用中-->
<div id="app">
	<component-three :person-date="personDate">
		<template #footer="slotProps">
			{{slotProps.item.id}}--{{slotProps.item.name}}--{{slotProps.item.sex}}
		</template>
	</component-three>
</div>
  • 其中<div>标签变为<template>，#为v-slot简写形式。也可写为v-slot:footer="slotProps"
（7.）解构插槽prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

  • 这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。如：
<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>
  • 它同样开启了 prop 重命名等其它可能，如：
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>
  • 甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：
<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>
（8.）动态插槽名
  • 动态指令参数也可以用在 v-slot 上，来定义动态的插槽名如：
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
KGQYumik~
关注
专栏目录
2021-08-06 vue笔记-插槽:匿名插槽,具名插槽和作用域插槽的定义和使用,在vue项目中使用插槽
GAARA
08-06 464
1.什么是插槽? 理解 作用 步骤 2.插槽的种类 3.匿名插槽 在网页使用匿名插槽 vue项目中使用匿名插槽 2.具名插槽 在网页中使用具名插槽: 结果 在vue项目中使用具名插槽 3.作用域插槽 在网页中使用作用域插槽 结果: 在vue项目中使用作用域插槽(匿名插槽) 在vue项目中使用作用域插槽(具名插槽)
vue插槽总结
weixin_47450807的博客
02-08 2922
一、认识插槽Slot 前面我们会通过props传递给组件一些数据，让组件来进行展示，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素，比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片，我们应该让使用者可以决定某一块区域到底存放什么内容和元素。所以有了插槽的存在，我们可以提高组件的复用性，并且也提高组件的灵活性。 二、插槽的基本使用 直接在其中使用<slot></slot> 三、插槽的
part3——mybatis多表查询
piaok_yumian的博客
02-24 987
表之间的关系（一对多，多对一，多对多，一对一） 举例：用户和订单——一对多；订单和用户——多对一；（一个用户可以下多个订单，多个订单属于同一用户）人和身份证号（一对一）学生和老师（多对多） 特例：在众多订单中拿出一个订单，此订单和用户——一对一 完成account表的建立及实现单标查询 本次案例主要以最为简单的用户和账户的模型来分析Mybatis多表关系。用户为User 表，账户为Account表...
【持续更新】学习MySQL时遇到的问题
yumi_huang的博客
05-28 547
1.修改数据库表和表中的字段的编码格式. 修改表的编码格式： ALTER TABLE `table` DEFAULT CHARACTER SET utf8; 修改字段的编码格式： ALTER TABLE `tablename` CHANGE `字段名1` `字段名2` VARCHAR(36) CHARACTER SET utf8 NOT NULL; 修改一张表中所有字段的编码...
Teacher_Cadre c++多文件编程
Kazama_Kenji的博客
04-14 827
//Teacher.h class Teacher { public: Teacher(string nam,int a,char s,string tit,string ad,string t); void display(); protected: string name; int age; char sex; string title; string addr; st
插槽是什么？我来告诉你！
山山而川~
02-06 2252
vue 插槽技术点学习
动画中英文对照表（09.24）
热门推荐
现在的生活
12-10 29万+
ID      英语名      中文名      作者      日语名1      .hack Legend of Twilights Bracelet      《.hack》黄昏的腕轮传说            2      .hack//Liminality in case of AIHARA,Yuki      《.hack》OVA版            3
十三.插槽
iloadj的博客
11-16 100
插槽 插槽: 子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。 解决问题：多个组件使用同一个子组件，需要传入或修改数据时，需要利用插槽。 1.子组件设置插槽 2.父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中,父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的 子组件设置插槽: 1.使用<slot></slot> 默认插槽 2.设置指定的需要使
【Vue3】第十三部分 插槽
Trees__的博客
09-17 579
13.1 默认插槽 13.2 具名插槽 13.3 作用域插槽
（三十八）Vue之插槽Slots
最新发布
忆亦何为的博客
06-11 679
在之前的文章中，我们已经了解到组件能够接收任意类型的值作为 props，在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段，由此就有了插槽。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。分类：默认插槽、具名插槽、作用域插槽。
vue相关知识点练习，共十三章
06-05
本练习集旨在帮助你深入理解和掌握Vue.js的关键知识点，覆盖了从基础到进阶的十三个章节。下面将详细阐述这些章节中涉及的核心概念和技术。 1. **基础概念**：这一章主要介绍Vue的基本架构，包括安装、创建项目、...
六、vue中key值的作用
qq_44023101的博客
04-14 613
vue中key值的作用 （1）管理可复用的元素 vue会复用已有的元素而不是重新开始渲染。比如登录和注册框来回切换，但也存在问题,当切换时用户输入的内容不会改变，因为两个模板使用一样的元素，里面的input标签不会被替换。如下： <div id="app"> <div v-if="loginType === 'username'"> <la...
（五、命名路由）
qq_44023101的博客
06-08 571
命名路由 （1.）命名路由 通过一个名称表示某个路由更方便。特别在链接一个路由，或执行一些跳转时。可创建Router实例的时候，在routes配置中给某个路由设置名称。 const router = new VueRouter({ routes: [ { path:'/user/:userId', name:'user', component:User } ] }) 要链接到一个命名路由，可以给router-link的to属性传一个对象： <router-link
十一、vue中的prop（父传子）
qq_44023101的博客
04-27 505
vue中的prop（父传子） 组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。 (1.)props是子组件访问父组件数据的唯一接口。 (2.)子组件用props来接收父组件传过来的值。 (3.)子组件想使用父组件传来的值时，就在props中声明一个变量，之后变量就可引用父元素的数据。 （1.）prop的大小写 H...
（四、编程式导航）
qq_44023101的博客
06-08 394
编程式导航 在vue实例内部，可以通过$router访问路由实例。因此可以调用this.$router.push （1）想要导航到不同url，则使用router.push方法。这个方法会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的url。 （2）当点击<router-link>时，这个方法会在内部调用，所以点击<router-link :to="...">等同于调用router.push(...)。 例： // 字符串 router.push(
（六、命名视图）
qq_44023101的博客
06-10 247
命名视图 有时想同时展示多个视图，例创建一个布局，有sidebar（侧导航）和main（主内容）两个视图。这时命名视图就可以实现这些需求，界面中可以拥有多个单独命名的视图，而不是只有一个单独的出口。如果touter-view没有设置名字，则默认为default。 ...
（八、路由组件传参）
qq_44023101的博客
06-11 232
路由组件传参 （1）路由组件传参 组件中使用$route会使之与其对应的路由形成高度耦合，从而使组件只能在特定的url上使用限制灵活性。 （2）使用props解耦 例： const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User }
十四、动态组件&异步组件
qq_44023101的博客
05-14 220
动态组件&异步组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值