vue3中＜script setup＞ 和 setup函数的区别

使用＜script setup＞

不需要在component 在注册了

五、使用自定义指令

不使用＜script setup＞

<script>
 
export default {
  directives: {
    onceClick: {
      mounted (el, binding, vnode) {
        console.log(el)
      }
    }
  },
 
}
script>

使用＜script setup＞

<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
    // 在元素上做些操作
  }
}
script>

全局注册的自定义指令将正常工作。本地的自定义指令在 

使用＜script setup＞

七、子传父

使用setup函数

使用＜script setup＞

• defineProps 和 defineEmits 都是只能在 

下面通过父组件获取子组件实例时 加definedExpose和不加 definedExpose的区别



 九、useSlots() 和 useAttrs()

useSlots 顾名思义 使用插槽的意思 那必然和插槽脱离不了关系

子组件 定义出一个插槽

 
<script setup>
import { onMounted, useSlots } from 'vue'
onMounted(() => {
  const slot = useSlots()
  const slotHeader = slot.header()
  console.log(slot, slotHeader)
})
script>

父组件

    <ComSlot>
      <template v-slot:header>我是父组件使用了headertemplate>
    ComSlot>

来看打印出来的slot和slotHeader

useSlots是一个函数可以打印出组件中所有的插槽  而打印出来的插槽同样是函数 调用后可以看到插槽的基础信息



 useAttrs

父组件

    <ComSlot class="box">
      <template v-slot:header><p>我是父组件使用了headerp>template>
    ComSlot>

子组件



useAttrs 可以拿到父组件传递过来的所有属性

十、与普通的

<script setup>

// 在 setup() 作用域中执行 (对每个实例皆如此)

script>

十一、顶层 await

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。



 注意：async setup() 必须与 Suspense 内置组件组合使用，Suspense 目前还是处于实验阶段的特性，会在将来的版本中稳定。

使用await demo

父组件

 
 
<script setup>
import { defineAsyncComponent } from 'vue' // 使用defineAsyncComponent异步引入组件
const ComAwait = defineAsyncComponent(() =>
  import('@/components/ComAwait.vue')
)
script>

子组件

 
<script setup>
const post = await fetch('https://api.uomg.com/api/rand.qinghua').then((r) => r.json())
script>

十二、限制