当前位置：首页 > article >正文

Vue3中 defineProps 与 defineEmits 基本使用

article 2024/11/15 17:43:22

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>

效果显示