vue插槽

从vue2.6.0开始，有了新的语法v-slot来代替slot和slot-scope

• 默认插槽（匿名插槽）

  • SlotView.vue

    • <template>
        <div>
          <DefaultSlot>
            <div>把我放在插槽的位置</div>
            <div>把我放在插槽的位置2</div>
          </DefaultSlot>
        </div>
      </template>
      
      <script>
      import DefaultSlot from '@/components/MySlot/DefaultSlot.vue'
      export default {
        name: 'SlotView',
        components: {
          DefaultSlot
        }
      }
      </script>
      
      <style></style>
      
      

  • DefaultSlot.vue

    • <template>
        <div>
          <div>以下是默认插槽的内容</div>
          <hr />
          <slot>后备内容:当没传递内容时就会显示后备内容</slot>
        </div>
      </template>
      
      <script>
      export default {}
      </script>
      
      <style></style>
      
      

  • 页面显示

    • 以下是默认插槽的内容
      横线
      把我放在插槽的位置
      把我放在插槽的位置2
      

• 具名插槽

  • SlotView.vue

    • <template>
        <div>
          <NameSlot>
            <div slot="header">把我放在header的位置</div>
            <div slot="main">把我放在main的位置</div>
            <div slot="footer">把我放在footer的位置</div>
          </NameSlot>
          <div>-----vue2.6.0之后的写法-----</div>
          <NameSlot>
            <!-- 'v-slot' directive must be owned by a custom element -->
            <template v-slot:header>
              <div>把我放在header的位置</div>
            </template>
            <template v-slot:main>
              <div>把我放在main的位置</div>
            </template>
            <template v-slot:footer>
              <div>把我放在footer的位置</div>
            </template>
          </NameSlot>
        </div>
      </template>
      
      <script>
      import NameSlot from '@/components/MySlot/NameSlot.vue'
      export default {
        name: 'SlotView',
        components: {
          NameSlot
        }
      }
      </script>
      
      <style></style>
      
      

  • NameSlot.vue

    • <template>
        <div>
          <slot name="header"></slot>
          <slot name="main"></slot>
          <slot name="footer"></slot>
        </div>
      </template>
      
      <script>
      export default {}
      </script>
      
      <style></style>
      
      

  • 页面显示

    • 把我放在header的位置
      把我放在main的位置
      把我放在footer的位置
      -----vue2.6.0之后的写法-----
      把我放在header的位置
      把我放在main的位置
      把我放在footer的位置
      

• 作用域插槽

  • SlotView.vue

    • <template>
        <div>
          <ScopedSlot>
            <div slot="default" slot-scope="{ user }">
              <div>{{ user.username }}</div>
              <div>{{ user.age }}</div>
            </div>
            <div slot="process" slot-scope="{ msg }">
              <div>{{ msg }}</div>
            </div>
          </ScopedSlot>
          <div>-----vue2.6.0之后的写法-----</div>
          <ScopedSlot>
            <template v-slot:default="{ user }">
              <div>{{ user.username }}</div>
              <div>{{ user.age }}</div>
            </template>
            <template v-slot:process="{ msg }">
              <div>{{ msg }}</div>
            </template>
          </ScopedSlot>
        </div>
      </template>
      
      <script>
      import ScopedSlot from '@/components/MySlot/ScopedSlot.vue'
      export default {
        name: 'SlotView',
        components: {
          ScopedSlot
        }
      }
      </script>
      
      <style></style>
      
      

  • ScopedSlot.vue

    • <template>
        <div>
          <slot :user="user"></slot>
          <slot name="process" :msg="'你好啊！'"></slot>
        </div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            user: {
              username: 'ym',
              age: 100
            }
          }
        }
      }
      </script>
      
      <style></style>
      
      

  • 页面显示

    • ym
      100
      你好啊！
      -----vue2.6.0之后的写法-----
      ym
      100
      你好啊！
      

具名插槽的缩写

  v-slot:插槽名="数据"

  可简写为

  #插槽名="数据"

<slot>xxx</slot>标签中的xxx为后备内容,当父组件未传递内容时就显示后备内容
父组件使用子组件时 如果传递的内容，子组件没有slot来接收，那么，传递的内容就会被抛弃掉，不会起作用。