<slot>插槽详细用法（1）不具名和具名插槽

//html 部分代码
<div id="div">

<adiv v-bind:style="componStyle" >
<button>这是一个按钮</button>
<p>这是一个没绑定slot的段落</p>  
</adiv > 

</div>

<script>

//组件部分
Vue.component('adiv', {  
  data:
	  function(){
		         return{lovingVue:""}
				  },
//模板内容
  template:
	  `<div >这个红色区域是模板里面div元素<br><br> 
	   </div>`
})

//vue 实例
new Vue({
	el:"#div",
	data:{ 
		componStyle:{
			backgroundColor:"red",
			fontSize:"20px",
			width:"200px",
			height:"200px"},
			lovingVue:"好的"},
})


</script>

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

模板中没有添加<slot>，html 代码部分的 <adiv></adiv>自定义元素 中间的其他代码都没有显示，只显示了<adiv></adiv>自定义元素 （这里自定义元素中的 <button> 和 <p> 元素都没有显示出来）

<adiv v-bind:style="componStyle" >
<button>这是一个按钮</button>
<p>这是一个没绑定slot的段落</p>  
</adiv >

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

Vue.component('adiv', {  
  data:
	  function(){
		         return{lovingVue:""}
				  },
  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">
<adiv v-bind:style="componStyle" >
<button slot="btn">这是一个按钮</button>
<p>这是一个没绑定slot的段落</p>  
</adiv > 

</div>

 组件部分代码

Vue.component('adiv', {  
  ... },

  template:
	  `<div >这个红色区域是模板里面div元素<br><br> 
	   <slot name="btn"></slot>
	   </div>`
})

网页渲染效果：

和具名插槽绑定的<button>元素显示出来了。

但是由于 <p> 元素没有绑定slot，所以，"<p>这是一个没绑定slot的段落</p>" 这个内容没有显示

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

此时添加一个没有 "name" 属性的不具名插槽。

现在html 里面的所有代码都显示出来了。

Vue.component('adiv', {  
 .... },

  template:
	  `<div >这个红色区域是模板里面div元素<br><br> 
	   <slot name="btn"></slot>
	   <slot></slot>   //添加了一个不具名插槽
	   </div>`
})

结论：

插槽 <slot> 的作用，就是可以在 vue组件模板中添加一个位置，使 html 代码部分 的自定义元素中间的内容，可以显示。

具名插槽可以通过绑定来分开控制不同的内容