SFC使用script setup

[TOC]

基础语法

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}

// import 
import { capitalize } from './helpers'
</script>

<template>
  <div @click="log">{{ msg }}</div>

  <div>{{ capitalize('hello') }}</div>
</template>

响应式

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

使用组件

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

动态组件

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

重命名组件

import { FooBar as FooBarChild } from './components'

命名空间的组件

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

defineProps

<script setup>
const props = defineProps({
  foo: String
})
</script>

TypeScript props declarations

// Parent Component
<template>
  <home-item title="按钮" :disabled="true"></home-item>
</template>
<script setup lang="ts">
import HomeItem from './HomeItem.vue'
</script>

// Child Component
<template>
  <el-button :disabled="disabled">{{ title }}</el-button>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'

interface Props {
  title?: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '按钮',
  disabled: false
})
</script>

defineEmits

<script setup>
const emit = defineEmits(['change', 'delete'])
// setup code
</script>

TypeScript Emits declarations

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

const count = ref(0)
type Emits = {
  (e: 'click', msg: string): void
  (e: 'change', num: number): void
}
const emit = defineEmits<Emits>()
const handleClick = (): void => {
  emit('click', 'Leave a message is necessary')
}
const handleAddClick = (): void => {
  count.value += 1
  emit('change', count.value)
}
</script>

全局变量-使用Vue.prototype替代方案

在Vue 2.x中可使用this.直接使用 ，但是在Vue 3.x中无法使用Vue.prototype进行设置，并且如果使用composition Api 没有this。那我们应该如何使用全局变量呢？

// main.js中
import Tool from '@/utils/tool'
Vue.prototype.$tool = Tool
// xxx.vue中使用this.直接使用
this.$tool.showValue(NaN,0)

方案一：globalProperties（不使用Composition Api的话推荐使用，否则不推荐）

• 使用globalProperties定义

  // main.js或main.ts中
  const app = createApp({})
  app.config.globalProperties.$tool = Tool
  

• Option Api: Vue3.x的使用方式同Vue 2.x

  this.$tool.showValue(NaN,0)
  

• Composition Api : 使用getCurrentInstance替代this(官方不推荐使用该方式),另外不要用ctx获取，可能会造成生产环境异常。

  <script lang="ts">
  import { defineComponent, getCurrentInstance } from 'vue'
  
  export default defineComponent({
    setup() {
      const { proxy } = getCurrentInstance()
      console.log(proxy.$tool.showValue(NaN, 0)) // 0
    }
  })
  </script>
  

• <script setup>：使用getCurrentInstance替代this(官方不推荐使用该方式),另外不要用ctx获取，可能会造成生产环境异常。

  <script setup lang="ts">
  import { inject } from 'vue'
  
  const { proxy } = getCurrentInstance()
  console.log(proxy.$tool.showValue(NaN,0)) // 0
  </script>
  

方案二 Provide / Inject

• Provide

// main.js或main.ts中
const app = createApp({})
app.provide('$tool', Tool)

• Inject

// script setup
<template>{{ $tool.showValue(NaN, 0) }}</template>
<script setup lang="ts">
import { inject } from 'vue'

const $tool = inject('$tool')
</script>

但是：这样跟每个组件里面直接引入文件也没有什么区别，所以还是直接引入吧。可以全局用globalProperties配置在使用Option API时使用。其余情况直接手动引入公共类吧。这样最起码在<templete/>中可以直接使用