vue3.0 Composition script-setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 标准组件格式 -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
// 要给 template 用的数据需要 return 出来才可以
return {}
},
})
</script>


// script-setup 直接使用
<script setup lang="ts">
// ...
</script>

components引用

  • 需要先导入组件
1
2
3
4
5
6
7
import Header from './Header.vue'
export default defineComponent({
// 需要通过 components 才能启用子组件
components: {
Header,
}
})
  • script-setup
1
2
3
<script setup lang="ts">
import Header from './Header.vue'
</script>

其他的变量、函数,以及 onMounted 等生命周期,还有像 watch 、 computed 等监听/计算功能,都跟原来一样定义就可以了,没有太大的区别

props && emits

  • 标准组件格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
父组件
<template>
<content :name="name" @change-name="changeName" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Content from './Content.vue'

export default defineComponent({
components: {
Content,
},
setup() {
const name = ref<string>('afacode')
const changeName = (val: string): void => {
name.value = val
}

return {
name,
changeName,
}
},
})
</script>

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

export default defineComponent({
props: ['name'],
emits: ['changeName'],
setup(props, { emit }) {
emit('changeName', '阿发')
},
})
</script>
  • script-setup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
父组件
<template>
<Child :name="name" @change-name="changeName" />
</template>

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

const name = ref<string>('afacode')
const changeName = (val: string): void => {
name.value = val
}
</script>

子组件
<script setup lang="ts">
import { defineEmit } from 'vue'
// props比较复杂.在后续
defineProps(['name'])
const emit = defineEmit(['chang-name'])
emit('chang-name', '阿发')
</script>

defineProps && defineEmit

defineProps 是一个方法,内部返回一个对象,也就是挂载到这个组件上的所有 props ,它和普通的 props 用法一样,如果不指定为 prop, 则传下来的属性会被放到 attrs 那边去

1
2
3
4
import { defineProps } from 'vue'
const props = defineProps(['name', 'userInfo', 'tags'])

console.log(props.name)

使用 string[] 数组作为入参,把 prop 的名称作为数组的 item 传给 defineProps

  • 类型检查

使用 JavaScript 原生构造函数进行类型规定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
defineProps({
name: String,
userInfo: Object,
tags: Array,
})

defineProps({
name: {
type: String,
required: false,
default: 'afacode',
},
userInfo: Object,
tags: Array,
})

使用 TypeScript 的类型注解

和 ref 等 API 的用法一样,defineProps 也是可以使用尖括号 <> 来包裹类型定义,紧跟在 API 后面,另外,由于 defineProps 返回的是一个对象(因为 props 本身是一个对象),所以尖括号里面的类型还要用大括号包裹,通过 key: value 的键值对形式表示,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
defineProps<{
name: string // 小写
phoneNumber: number
userInfo: object
tags: string[]
}>()

userInfo 是一个对象,你可以简单的指定为 object,也可以先定义好它对应的类型,再进行指定

interface UserInfo {
id: number
age?: number
}

defineProps<{
name: string // 小写
phoneNumber: number
userInfo: UserInfo
tags: string[]
}>()


设置可选参数的默认值,这个暂时不支持,不能跟 TS 一样指定默认值

如果需要默认指定,并且无需保留响应式的话,我自己测试是可以按照 ES6 的参数默认值方法指定

const { name = 'afacode' } = defineProps<{
name?: string
tags: string[]
}>()

defineEmit

1
// 获取 emitconst emit = defineEmit(['chang-name'])// 调用 emitemit('chang-name', '阿发')

useContext

1
// 标准context 组件的执行上下文setup(props, context) {}// script-setupimport { useContext } from 'vue'const ctx = useContext()// 打印 attrsconsole.log(ctx.attrs)

expose 对外暴露接口|属性 (一般无用)

1
2
3
4
5
6
7
8
9
10
const ctx = useContext()
ctx.expose({
someMethod() {
console.log('some HelloWorld')
}})

================================

<AMap @toAddr="getAddr" ref="hw"/>
const hw = ref(null)hw.value.someMethod()

广告(云服务器)

阿里云活动
ECS共享型 n4 1核2G1M,1年79元,3年226。
ECS共享型 s6 2核4G1M,1年263元,3年621。
ECS共享型 s62核-8G-1M,3年859元。
点击查看详情(更多优惠)
腾讯云活动
新用户(老用户换QQ客享受)   云服务器 标准型S3 1核/2G/1M 95一年,   轻量 2核4G5M(限定) 3年只要688 点击查看详情(更多优惠)