slot插槽

slot 插槽

1. 作用： 可以让我们在组件中书写内容

<div id="app">
    <Hello>
      <header>  头部  </header>
      <section> 内容 </section>
      <footer> 底部 </footer>
    </Hello>
</div>

  <template id="hello">
    <div>
      hello
      <slot></slot>
    </div>
  </template>

2. 具名插槽

<div id="app">
    <Hello>
      <header slot = "header">  头部  </header>
      <section slot = "content"> 内容 </section>
      <footer slot = "footer"> 底部 </footer>
    </Hello>
</div>

  <template id="hello">
    <div>
      <slot name = "header"></slot>
      <slot name = "content"></slot>
      hello
      <slot name = "footer"></slot>
    </div>
  </template>

slot 作用域插槽

1. 旧： slot-scope
   • 使用流程
     • 在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
     • 在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
     • 通过 slotProp.xxx 就可以进行使用了

           <div id="app">
             <Hello>
               <template slot = "default" slot-scope = "slotProp">
                 <p> {{ slotProp.msg }} </p>
               </template>
             </Hello>
           </div>
           <template id="hello">
             <div>
               <slot name = "default" :msg = "msg"></slot>
             </div>
           </template>
         </body>
     

   ```javascript
           Vue.component('Hello',{
             template: '#hello',
             data () {
               return {
                 msg: 'hello'
               }
             }
           })
           new Vue({
             el: '#app'
           })
   

2. 新： v-slot

  <div id="app">
    <Hello>
      <template v-slot:default = "slotProp">
        {{ slotProp.msg }}
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>

  new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')