Vue中slot 插槽（新旧版本）

slot 插槽

作用/概念: 预先将将来要使用的内容进行保留
具名插槽：给slot起个名字

slot 作用域插槽

旧： slot-scope

使用流程

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <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>
    <script src="../../lib/vue.js"></script>
    <script>
      Vue.component('Hello',{
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      })
      new Vue({
        el: '#app'
      })
    </script>
    </html>

新： v-slot
- 为什么要用 v-slot指令来代替呢？
- 经具名插槽和作用域插槽进行统一
- 要将这两个属性带有 vue的标志，并且符合vue两个最大的特性之一：指令的概念

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

要求： 2.6版本前的会，2.6版本后的v-slot也得会

Vue中slot 插槽（新旧版本）

slot 插槽

slot 作用域插槽

猜你喜欢