defineProps

获取组件传值

<template> <h1>{{ msg }}</h1> <div @click="clickThis">1111</div> </template> <script setup lang="ts"> defineProps<{ // 采用ts专有声明，无默认值 msg: string, num?: 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(['click']) const clickThis = () => { emit('click',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>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。