vue20——slot 插槽的基本使用

组件的插槽

• 让封装的组件更有扩展性
• 让使用者可以决定组件内部的一些内容要展示什么

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性

1. 不设默认值

<div id = 'app'>
    <cpn1> <button>anniu</button> </cpn1>
    <cpn1><span>span</span></cpn1>
    <cpn1> <button>anniu</button> <span>span</span> </cpn1>
    <cpn1></cpn1>

  </div>
  <template id = 'cpn1'>
    <div>
      <h2>我是组件</h2>
      <slot></slot>
    </div>
  </template>

2. 设置默认值

<div id = 'app'>
    <cpn1> <button>anniu</button> </cpn1>
    <cpn1><span>span</span></cpn1>
    <cpn1> <button>anniu</button> <span>span</span> </cpn1>
    <cpn1></cpn1>

  </div>
  <template id = 'cpn1'>
    <div>
      <h2>我是组件</h2>
      <slot> <div>默认值</div> </slot>
    </div>
  </template>