第六章、Vue3高级

目录

• 二十四、项目实战细节（二）
  • 1、组件设置name属性
  • 2、$slots和$scopedSlots
  • 3、vue模版的for-in和for-of

二十四、项目实战细节（二）

1、组件设置name属性

<script setup>
// Vue3.3后支持
defineOptions({
  name: '组件名',
  inheritAttrs: false
})
</script>

2、$slots和$scopedSlots

<template>
  <abc>
    <div>默认插槽</div>
    <template #aaa>
      <div>具名插槽</div>
    </template>
    <template #bbb="scope">
      <div>作用域插槽{{ scope }}</div>
    </template>
  </abc>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Abc from '@/views/login/Abc.vue'

export default defineComponent({
  name: 'Login',
  components: {
    Abc
  }
})
</script>

<script lang="ts">
import { defineComponent, CreateElement, VNode } from 'vue'

export default defineComponent({
  name: 'Abc',
  render(createElement: CreateElement): VNode {
    console.log(this.$slots) // 不包含作用域插槽
    console.log(this.$scopedSlots) // 可以传值
    // children数组参数会自动flat(Infinity)
    return createElement('div', {}, [
      this.$slots.default,
      this.$slots.aaa,
      this.$scopedSlots!.default!(null),
      this.$scopedSlots!.aaa!(null),
      this.$scopedSlots!.bbb!('bbb')
    ])
  }
})
</script>

3、vue模版的for-in和for-of

<template>
  <div>
    <div v-for="(item,index) of arr" :key="index">{{ item }}</div>
    <div v-for="(value,key) in obj" :key="key">{{ key }}: {{ value }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Abc',
  data() {
    return {
      arr: ['猛犸', '斧王', '马尔斯'],
      obj: {
        name: '冰女',
        kill: 10,
        dead: 0
      }
    }
  }
})
</script>