vuejs的插槽(slot)

1、概念:

我的理解是slot就是一个插槽,将父组件的html混入到子组件里面。
普通的slot，数据和数据的展现形式(html和样式),都由父组件决定,子组件只能决定出现的地方.
作用域slot,数据由子组件提供,展现形式由父组件决定,我感觉就是父组件把子组件的数据加工样式后,再替换掉子组件的slot标签元素。

2、普通slot

例子:

<div id="app">
	    <my-component>
	      <span slot="myslot">来着父组件的内容</span>
	    </my-component>
</div>

Vue.component('my-component',{
	    template:'\
	      <div>\
	        <span>子组件的内容</span>\
	        <slot name="myslot"></slot>\
	      <div>\
	    '
});
	
var app=new Vue({
    el:"#app"
});

理解:

子组件声明一个name为myslot的插槽,子组件渲染时,父组件的slot="myslot"元素会替换掉子组件的slot

3、作用域slot

例子:

 <div id="app">
 	<my-list :books="books">
     <template slot="my-slot" scope="props">
       <li style="background-color: aquamarine">{{props.index}}.{{props.bookName}}</li>
     </template>
   <my-list>
 </div>

Vue.component('my-list',{
   props:['books'],
   template:'\
       <ul>\
         <slot name="my-slot" v-for="(book,index) in books" :index="index" :book-name="book.name"></slot>\
       </ul>\
   '
 });

 var app=new Vue({
   el:"#app",
   data:{
     books:[
       {name:'《Vue.js》'},
       {name:'《html》'},
       {name:'《cssss》'}
     ]
   }
 });

理解:

子组件声明一个name为my-slot的插槽,子组件渲染时，父组件会通过 scope="props"的props读取子组件的一些数据,然后加工一些样式或者html.
然后父组件的slot="myslot"元素会替换掉子组件的slot。

4、访问slot

访问被slot分发的内容,$slots，$slots.defalut是获取到父组件的除开具名slot之外的所有元素。

注意的点:

  (1)、如果是匿名slot,子组件自定义标签内的元素会替换它。
  (2)、如果子组件内没有开启匿名slot,子组件自定义标签内的元素会被舍弃。
  (3)、通过props读取子组件的绑定属性时,需要转换为驼峰命名法。