Vue3之defineProps、defineEmits和defineExpose的使用及说明
作者：样子2018
文章介绍了Vue中defineProps、defineEmits和defineExpose的用途和作用,defineProps用于在子组件中定义类型安全的props,defineEmits允许子组件向父组件传递事件
一、使用说明
- defineProps 供了一种更加明确和类型安全的方式来定义子组件的 props，使得子父组件之间的数据传递更加清晰和可维护。
- defineEmits 实现子组件向父组件传递数据或事件。
- defineExpose 明确要暴露出去的属性和方法，使得父组件可以通过ref访问子组件的这些属性和方法，必须在变量和方法声明定义之后使用。
二、简单示例
- Test.vue
<template>
<div>
<p>{{msg}} - {{exposeStr}} - {{count}}</p>
<button @click="_click">set msg</button>
<button @click="count++">加</button>
<button @click="count--">减</button>
</div>
</template>
<script setup>
import {
ref
} from 'vue'
const exposeStr = ref('')
const count = ref(0)
const open = () => {
console.log('this is a open function')
}
const emit = defineEmits(['setMsg'])
const props = defineProps({
msg: {
type: String,
default: 'this is a test component'
}
})
const _click = () => {
emit('setMsg', {msg: props.msg})
}
defineExpose({
exposeStr,
open
})
</script>
<style>
</style>- App.vue
<script setup>
import Test from './components/Test.vue'
import {
ref
} from 'vue'
const detail = ref('')
const setMsg = (val) => {
detail.value.exposeStr = "set expose msg"
detail.value.open()
console.log(val)
}
</script>
<template>
<Test ref="detail" msg="this is a test component" @setMsg="setMsg"></Test>
</template>
<style>
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。