setup语法糖的使用 - 小宇的博客

前言#

在setup()中手动暴露状态和方法会很冗长。幸运的是,只有在不使用构建步骤时不是必要的.当使用单文件中，我们可以通过<script setup>大大简化使用

基本使用#

1
<script setup>
2
  // imported components are also directly usable in template
3
  import Foo from './Foo.vue'
4
  import { ref } from 'vue'
5

6
  // write Composition API code just like in a normal setup()
7
  // but no need to manually return everything
8
  const count = ref(0)
9
  const inc = () => {
10
    count.value++
11
  }
12
</script>
13

14
<template>
15
  <Foo :count="count" @click="inc" />
16
</template>

编译结果

1
import Foo from './Foo.vue'
2
import { ref } from 'vue'
3

4
export default {
5
  setup() {
6
    const count = ref(1)
7
    const inc = () => {
8
      count.value++
9
    }
10

11
    return function render() {
12
      return h(Foo, {
13
        count,
14
        onClick: inc
15
      })
16
    }
17
  }
18
}

定义 props 和 emit#

1
<script setup>
2
  // expects props options
3
  const props = defineProps({
4
    foo: String
5
  })
6
  console.log(props.foo)
7

8
  // expects emits options
9
  const emit = defineEmits(['update', 'delete'])
10
  emit('update')
11
</script>

编译结果

1
export default {
2
  props: {
3
    foo: String
4
  },
5
  emits: ['change', 'delete'],
6
  setup(props, { emit }) {
7
    // setup code
8
  }
9
}

导入组件#

<script setup> 内导入的组件，可以直接在模版中使用。

1
<script setup>
2
  import Foo from './Foo.vue'
3
  import MyComponent from './MyComponent.vue'
4
</script>
5

6
<template>
7
  <Foo />
8
  <my-component />
9
</template>

编译结果

1
import Foo from './Foo.vue'
2
import MyComponent from './MyComponent.vue'
3

4
export default {
5
  setup(){
6
    return function render(){
7
      return [h(Foo),h(MyComponent)]
8
    }
9
  }
10
}

使用指令#

指令以类似的方式工作—除了名为 v-my-dir 的指令名映射到 setup作用域中名为 vMyDir 的变量

1
<script setup>
2
  import { directive as vClickOutside } from 'v-click-outside'
3
</script>
4

5
<template>
6
  <div v-click-outside />
7
</template>

编译结果

1
import { directive as vClickOutside } from 'v-click-outside'
2

3
export default {
4
  setup() {
5
    return function render() {
6
      return withDirectives(h('div'), [[vClickOutside]])
7
    }
8
  }
9
}

使用 slots 和 attrs#

1
<script setup>
2
  import { useSlots, useAttrs } from 'vue'
3

4
  const slots = useSlots()
5
  const attrs = useAttrs()
6
</script>

暴露组件公用接口#

1
<script setup>
2
  const a = 1
3
  const b = ref(2)
4

5
  defineExpose({
6
    a,
7
    b
8
  })
9
</script>

与普通的script标签一起使用#

有些情况下，代码必须在模块范围内执行，例如：

申报命名出口
应该只执行一次的全局副作用。

在这种情况下，正常的<script>块可以与<script setup>一起使用

1
<script>
2
  performGlobalSideEffect()
3

4
  // this can be imported as `import { named } from './*.vue'`
5
  export const named = 1
6
</script>
7

8
<script setup>
9
  import { ref } from 'vue'
10

11
  const count = ref(0)
12
</script>

编译结果

1
import {ref} from 'vue'
2
performGlobalSideEffect()
3
export const named = 1
4
export default {
5
  setup(){
6
    const count = ref(0)
7
    return { count }
8
  }
9
}

声明其他选项#

<script setup>语法提供了表达大多数现有选项API选项的等效功能的能力，但以下几个选项除外：

name
inheritAttrs
插件或库所需的自定义选项

如果需要声明这些选项，请使用带有导出默认值的单独<script>

1
<script>
2
  export default {
3
    name: 'CustomName',
4
    inheritAttrs: false,
5
    customOptions: {}
6
  }
7
</script>
8

9
<script setup>
10
  // script setup logic
11
</script>

provide & inject#

1
<script setup>
2
import { ref, provide } from 'vue'
3
const name = ref('xiaoyu')
4
provide('name',name)
5
</script>
6

7
<!-- 子组件 -->
8
<script setup>
9
import { inject } from 'vue'
10
const name:string = inject('name')
11
</script>