单文件组件 <script setup>
基本用法:
<template>
<button @click="log">{
{ msg }}</button>
</template>
<script setup>
const msg = 'Hello!'
function log() {
console.log(msg)
}
</script>
接受props值和emit事件:
<script setup>
const props = defineProps({
foo: String
})
// 接口设置,给props定义类型
export interface Props {
msg?: string
labels?: string[]
}
// props 设置默认值
withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
// 触发事件
const emit = defineEmits(['change', 'delete'])
emit('change')
</script>
组合式 API:setup()
基本用法:
<template>
<button @click="count++">{
{ count }}</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
},
mounted() {
console.log(this.count) // 0
}
}
</script>
接受props值和emit事件:
<template>
<button @click="count++">{
{ count }}</button>
</template>
<script>
import { ref } from 'vue'
export default {
props: {
title: String,
default: ''
},
setup(props, context) {
const count = ref(0)
// 使用props中的值
console.log(props.title)
// emit 事件
ontext.emit('事件命')
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
},
mounted() {
console.log(this.count) // 0
}
}
</script>