新舊slot插槽用法

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>
     

        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')