vue3 中的defineProps、defineEmits、defineExpose
defineProps
获取组件传值
1 <template> 2 <h1>{{ msg }}</h1> 3 <div @click="clickThis">1111</div> 4 </template> 5 6 <script setup lang="ts"> 7 defineProps<{ // 采用ts专有声明，无默认值 8 msg: string, 9 num?: number 10 }>() 11 // 采用ts专有声明，有默认值 12 interface Props { 13 msg?: string 14 labels?: string[] 15 } 16 const props = withDefaults(defineProps<Props>(), { 17 msg: 'hello', 18 labels: () => ['one', 'two'] 19 }) 20 21 defineProps({ // 非ts专有声明 22 msg: String, 23 num: { 24 type:Number, 25 default: '' 26 } 27 }) 28 </script> 29 30 <style scoped lang="less"> 31 </style>
defineEmits
子组件向父组件事件传递
1 <template> 2 <div @click="clickThis">点我</div> 3 </template> 4 5 <script setup lang="ts"> 6 /*ts专有*/ 7 const emit= defineEmits<{ 8 (e: 'click', num: number): void 9 }>() 10 /*非ts专有*/ 11 const emit= defineEmits(['click']) 12 13 const clickThis = () => { 14 emit('click',2) 15 } 16 </script> 17 18 <style scoped lang="less"> 19 </style>
defineExpose
子组件暴露自己的属性
1 <template> 2 <div>子组件helloword.vue</div> 3 </template> 4 5 <script setup lang="ts"> 6 import { ref } from 'vue' 7 const count = ref(123456) 8 defineExpose({ 9 count 10 }) 11 </script> 12 13 <style scoped lang="less"> 14 </style>
父组件获取属性
1 <template> 2 <div @click="helloClick">父组件</div> 3 <helloword ref="hello"></helloword> 4 </template> 5 6 <script setup lang="ts"> 7 import { ref } from 'vue' 8 import helloword from './components/HelloWorld.vue' 9 const hello = ref(null) 10 const helloClick = () => { 11 console.log(hello.value.count) // 123456 12 } 13 </script> 14 15 16 <style lang="less" scoped> 17 </style>
