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