Vue3：【props、emit 和 components】 在 setup 语法糖和非语法糖中的使用

1 props

1.1 setup 语法糖

<script lang="ts" setup>interface PersionItem {id: numbervalue: numberimageSrc: stringlabel: string
}
const props = defineProps({personData: {type: Array as () => PersionItem[],default: () => []}
})console.log(props.personData)

1.2 非语法糖

<script lang="ts">interface Option {imageSrc: StringfileName: StringmodifierInfo: Stringpath: Stringorigin: String
}
export default {props: {listData: {type: Array as () => Option[],default: () => []}},setup(props, { emit }) {console.log(props.listData)return {}}
}
</script>

2 emit

2.1 setup 语法糖

<script lang="ts" setup>
import { defineEmits } from 'vue'
// 定义
const emit = defineEmits(['checkPerson'])const check = () => {emit('checkPerson', personID.value)
}
</script>

2.2 非语法糖

<script lang="ts">
export default {emits: ['focusEvent', 'blurEvent'],setup(props, { emit }) {// const emit = defineEmits(['debouncedInput', 'focusEvent', 'blurEvent'])// 获得焦点事件const focusFn = () => {emit('focusEvent')}// 失去焦点事件const blurFn = () => {emit('blurEvent')}return {  focusFn, blurFn }}
}
</script>

3 components 组件

3.1 语法糖

引入后直接用

3.2 非语法糖

<script lang="ts">
import fileNameItem from './fileNameItem.vue'export default {// 局部注册组件components: {fileNameItem},setup(props, { emit }) {return {}}
}
</script>