插槽详细用法之不具名和具名插槽

//html 部分代码
<div id="div">
   <my-div :style="componStyle" >
        <button>这是一个按钮</button>
        <p>这是一个没绑定slot的段落</p>  
    </my-div > 
</div>
 
<script>
//组件部分
Vue.component('MyDiv', {  
    data(){
        return {testVal:""}
    },
//模板内容
    template:`<div >这个红色区域是模板里面div元素<br><br></div>`
})
 
//vue 实例
new Vue({
	el:"#div",
	data:{ 
	componStyle:{
    	backgroundColor:"red",
    	fontSize:"20px",
    	width:"200px",
    	height:"200px"
	},
	testVal:"好的"},
})
</script>
复制代码

1. 如果不使用slot, 则在html 代码部分,自定义元素中间的其他代码不显示

模板中没有添加<slot>,html 代码部分的 <my-div></my-div>自定义元素
中间的其他代码都没有显示,只显示了<my-div></my-div>自定义元素 
(这里自定义元素中的 <button> 和 <p> 元素都没有显示出来)
复制代码
<my-div :style="componStyle" >
    <button>这是一个按钮</button>
    <p>这是一个没绑定slot的段落</p>  
</my-div >
复制代码
 
 

2. 组件模板部分添加slot, html 代码部分的 自定义元素中间的其他代码都显示了

Vue.component('MyDiv', {
    data(){
        return {testVal:""}
    },
template:
  `<div >这个红色区域是模板里面div元素<br><br> 
        <slot></slot>
   </div>`
})
复制代码
 
 

3. 具名插槽:使用 slot中的 "name" 属性绑定元素

上面的 2 例子中,<slot> 没有使用 "name" 属性绑定元素,是不具名插槽;
这个例子中,使用使用 <slot> 中的 "name" 属性绑定元素。
复制代码
例子解析:
在 html 部分的<button>元素使用 slot 属性:<button slot="btn">
在 vue组件部分添加<slot> 并使用 name 属性: <slot  name="btn">
复制代码

html 部分代码

<div id="div">
    <my-div v-bind:style="componStyle" >
        <button slot="btn">这是一个按钮</button>
        <p>这是一个没绑定slot的段落</p>  
    </my-div >
</div>
复制代码

组件部分代码

Vue.component('MyDiv',{
    data(){
        return {testVal:""}
    },
    template:
	  `<div >这个红色区域是模板里面div元素<br><br> 
	        <slot name="btn"></slot>
	   </div>`
})
复制代码

网页渲染效果:

和具名插槽绑定的<button>元素显示出来了。
但是由于 <p> 元素没有绑定slot,所以,"<p>这是一个没绑定slot的段落</p>" 这个内容没有显示
复制代码
 
 

4. 具名插槽和不具名插槽同时使用

此时添加一个没有 "name" 属性的不具名插槽,现在html 里面的所有代码都显示出来了。

Vue.component('MyDiv', {
    data(){
        return {testVal:""}
    },
    template:
	  `<div >这个红色区域是模板里面div元素<br><br> 
    	   <slot name="btn"></slot>
    	   <slot></slot>   //添加了一个不具名插槽
	   </div>`
})
复制代码
 
 

结论:

插槽 <slot> 的作用,就是可以在 vue组件模板中添加一个位置,
使 html 代码部分 的自定义元素中间的内容,可以显示。
具名插槽可以通过绑定来分开控制不同的内容
复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值