slot

• slot的意思是插槽
• 先占个位置, 后填充内容

例如: 电脑主板上的各种插槽, 可以插CPU, 显卡等
假设自定义组件computer的模板如下

<template>
<div>
  <slot name="CPU">这儿插你的CPU</slot>
  <slot name="GPU">这儿插你的显卡</slot>
  <slot name="Memory">这儿插你的内存</slot>
  <slot name="Hard-drive">这儿插你的硬盘</slot>
</div>
</template>

有了预留各种插槽的模板, 这样每个人可以根据自己的需求去装备电脑啦!

用途

• slot可以改变组件的内容和样式,这样组件可以多次复用
• 让组件可以与外部通信

基本用法

• 在父组件中放入已被 slot 标记的内容
• 父组件在要分发的标签里添加 slot=”name名” 属性

<div id="app"> 
  <children> 
    <span slot="first">12345</span> 
    <span slot="second">56789</span> 
<!--上面这行不会显示--> 
  </children> 
</div> 

<script> 
var vm = new Vue({ 
    el: '#app', 
    components: { 
        children: { //这个无返回值，不会继续派发 
          template: "<button><slot name='first'></slot>为了明确作用范围，<slot name='second'></slot>所以使用button标签</button>"
    } 
  } 
}); 
</script>