Vue3中 defineProps 与 defineEmits 基本使用

本文主要是介绍Vue3中 defineProps 与 defineEmits 基本使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

defineProps

基本概念

在Vue 3中，defineProps是一个函数，用于定义一个组件的props。它接收一个props对象作为参数，并且会返回一个响应式的props对象。简单来说在vue3中，在进行父组件向子组件的通信，我们可以使用defineProps实现。

基本使用

在vue3中在setup语法糖中使用defineProps时，我们不需要引用。在父组件中使用子组件的同时，进行数据通信，在子组件中使用definePorps进行接收使用，值得注意的是接收的数据是只读的即不可更改。

父组件

<script setup>
import Son from './components/Son.vue'
const num = 666
</script><template><div class="father"><h1>父组件</h1><!-- 传数据 --><Son message="父组件的信息" :num="num" /></div>
</template>

子组件

<script setup>
// 接收传过来的数据
// defineProps(['message', 'num'])//接收并保存
const myProps = defineProps(['message', 'num'])
</script><template><div class="son"><h2>我是子组件</h2><!-- 使用父组件的数据 --><p>接收的数据：{{ myProps.message }} -- {{ myProps.num }}</p></div>
</template>

效果显示

类型限制

在defineProps中我们可以对传来的的数据进行限制，在ts中我们也可以使用范型和接口进行限制。

<script setup>
defineProps({
//对数据进行类型限定 message: String,num: Number,
})
</script><template><div class="son"><h2>我是子组件</h2><!-- 使用父组件的数据 --><p>接收的数据：{{ message }} -- {{ num }}</p></div>
</template>

一旦我们传的数据不符合类型限制，vue就会报警告

defineEmits

基本概念

Vue 3中的defineEmits是一个新的函数，用于定义组件的自定义事件。在Vue 2中，我们可以使用$emit来触发组件的自定义事件，但是在Vue 3中，$emit被移除了。相反，我们可以使用defineEmits来定义组件的自定义事件。

基本使用

父组件

<script setup>
import { ref } from 'vue'
import Son from './components/Son.vue'
const sonData = ref()// 定义接收组件的函数
const getSonData = (data) => {sonData.value = data
}
</script><template><div class="father"><h1>父组件</h1><p>接收的子组件的数据:{{ sonData }}</p><!-- 在父组件中，给子组件绑定自定义事件 --><Son @getData="getSonData" /></div>
</template>

子组件

<script setup>
import { ref } from 'vue'
const sonData = ref('子组件的数据')// 在子组件中调用defineEmits并定义要发射给父组件的方法
// 使用defineEmits会返回一个方法，使用随意变量去接收
const emits = defineEmits(['getData'])const sentData = () => {// 调用emits并传入发射给父组件的方法以及参数emits('getData', sonData.value)
}
</script><template><div class="son"><h2>我是子组件</h2><button @click="sentData">传送数据</button></div>
</template>

效果显示