slot插槽：匿名插槽具名插槽作用域插槽 v-slot

最新推荐文章于 2023-07-01 21:52:30 发布

Allen·赵

最新推荐文章于 2023-07-01 21:52:30 发布

阅读量376

点赞数

分类专栏： vue2

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108961037

版权

vue2 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

slot插槽

slot通俗理解：是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；
Slot使用

1、（匿名插槽）组件中有单个或多个未命名slot标签时，如下：

<Child><span style=”color:red;”>hello world</span></Child>   
<template>    
  	<div>
		<slot></slot>
		<slot  style=”color:blue;” >这是在slot上添加了样式</slot>	
		<slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>
	</div>
</template>

会输出：两个红色的hello world，以及一个使用slot的默认内容
注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

2、（具名插槽）组件中有多个命名的slot 插槽时，可以实现父组件对子组件的指定位置显示内容或传参，如下：

<Child>
	<span slot="header">hello world</span>	
	<span slot="main">hello world</span>
	<span slot="footer">hello world</span>	
	<span slot="other">{{otherData}}</span>
</Child> 

<template>
	<div>		
		<slot  name=”header”>这是拥有命名的slot的默认内容</slot>			
		<slot  name=”main”>这是拥有命名的slot的默认内容</slot>			
		<slot  name=”footer”>这是拥有命名的slot的默认内容</slot>			
		<slot  name=”other”>这是拥有命名的slot的默认内容</slot>		
	</div>	
</template>

3、作用域插槽！！：

使用时候子组件标签<Child>中要有<template slot-scope=”scopeName”>标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；

作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：

   <ul>	
      <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >	
         slot的默认内容	
      </slot>	
   </ul>

   <Child>	
      <template slot="item" slot-scope="props">	
        <li>{{props.myname}}</li>	
      </template>	
   </Child>

或者

//子组件
<div class="box" v-for="item of list" :key="item.id">
      <div class="box-title">
        <p>
          <span>{{item.deNo}}</span>
          <!--我们为每个item准备了一个插槽，将item对象作为一个插槽的prop传入-->
            <slot class="genre" v-bind:item="item"></slot>
        </p>
        <p>{{item.deDate}}</p>
      </div>
	    </div>
//父组件
<div>
    <!--1.作用域插槽必须是template开头和结尾的内容-->
    <!--2.slot-scope="props"声明从子组件传递的数据都放在props里-->
    <!--3.加上v-if="props.item!=undefined"判断，防止取不到item的属性-->
    <template slot-scope="props" v-if="props.item!=undefined">
        <!--告诉子组件模板的信息是以<span>标签的形式-->
                <span class="genre">{{props.item.state}}</span>
    </template>
</div>

总

<body>
    <div id="app">
    <hello>
        <p slot="yidong">移动卡</p>
        <p slot="liantong">联通卡</p>
    </hello>
    <hr>
    <hello></hello>
    <hr>
    <hello>
        <p slot="yidong">移动卡</p>
    </hello>
</div>
    <template id="hello">
        <div>
            <slot name="yidong"></slot>
          	 <p> 我是hello</p>
            <slot name="liantong"></slot>
        </div>
    </template>    
</body>
<script src="./base/vue.js"></script>
<script>
   //在组件标签内部写入的内容默认的会被替换掉，
   //如果想要在组件的模板里使用这些内容，
   //就在对应的位置写上slot标签，这个slot标签就代表着这些内容    
    Vue.component("hello",{
        template:"#hello"
    })
    new Vue({
        el:"#app",
    })
</script>

在这里插入图片描述

v-slot

//2.6+ 支持v-slot指令可以实现作用域槽口

   <body>
    <div id="app">
        <hello>
            <template v-slot:p1="info">我是p标签 -- {{info.msg}} -- {{info.arr}}</template>
        </hello>
        <hr>
        <hello>
            <template v-slot:p1="info">{{info.arr.slice(2)}}</template>
        </hello>
    </div>

<template id="hello">
    <div>
        <slot name="p1" :msg="msg" :arr="arr"></slot>
    </div>
</template>

</body>
<script src="./base/vue.js"></script>

<script>
Vue.component("hello",{
    template:"#hello",
    data(){
        return {
            msg:"你好",
            arr:[1,2,3,4,5]
        }
    }
})


new Vue({
    el:"#app",
})

Allen·赵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
slot插槽：匿名插槽具名插槽作用域插槽 v-slot

slot插槽slot通俗理解：是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；Slot使用1、（匿名插槽）组件中有单个或多个未命名slot标签时，如下：<Child><span style=”color:red;”>hello
复制链接

扫一扫