Vue——Slot（插槽) 2019.03更新

使用方法

一般而言，我们组件的结构都是预先写好的。

但是我们开发过程中经常会碰到这么一个情况，引用子组件以后，我还想要在父组件使用子组件的时候，灵活地改变子组件里面的内容。

譬如，子组件里面原本定义了一个ul，然后使用v-for的方式遍历li里面的span内容。

此时，如果我们在子组件的li里面如果是一个slot，便可以很轻松地替换span为其他内容。

子组件list

<template>
  <ul>
    <li v-for="(item,list) in list" :key="`item_${index}`">
	  <slot :number="item.number"></slot>
	</li>
  </ul>
</template>
<script>
export default {
  props:{
    list: {
      type: Array,
      default: ()=>[]
    }
  }
};
</script>

父组件

<template>
	<div>
	  <list :list="list">
	  	<input slot-scope="count" :value="count.number"/>
	  </list>
	</div>
</template>
<script>
export default {
  data() {
    return {
      list: [
	    {number:20},
	    {number:50}
	  ]
    }
  }
};
</script>

这里需要说明一下，slot-scope这个属性可以随便取一个值，它表示的是子组件list里面的slot插件的一些属性集合起来的对象，我们可以使用count.number获得slot插件上的number属性。