defineProps
获取组件传值
<template>
<h1>{{ msg }}</h1>
<div @click="clickThis">1111</div>
</template>
<script setup lang="ts">
defineProps<{ // 采用ts专有声明，无默认值
msg: string,
num?: number
}>()
defineProps<{ title?: string, hello?: (string | number) }>() //多值传值
// 采用ts专有声明，有默认值
interface Props {
msg?: string
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
defineProps({ // 非ts专有声明
msg: String,
num: {
type:Number,
default: ''
}
})
</script>
<style scoped lang="less">
</style>
defineEmits
子组件向父组件事件传递
<template>
<div @click="clickThis">点我</div>
</template>
<script setup lang="ts">
/*ts专有*/
const emit= defineEmits<{
(e: 'click', num: number): void
}>()
/*非ts专有*/
const emit= defineEmits(['clickThis'])
const clickThis = () => {
emit('clickThis',2)
}
</script>
<style scoped lang="less">
</style>
defineExpose
组件暴露自己的属性
<template>
<div>子组件helloword.vue</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(123456)
defineExpose({
count
})
</script>
<style scoped lang="less">
</style>
<template>
<div @click="helloClick">父组件</div>
<helloword ref="hello"></helloword>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import helloword from './components/HelloWorld.vue'
const hello = ref(null)
const helloClick = () => {
console.log(hello.value.count) // 123456
}
</script>
<style lang="less" scoped>
</style>
