vue3.x学习笔记之项目实战 -- defineProps 和 defineEmits

• defineProps 和 defineEmits

‍• 概述
• 子组件
• 父组件

‍

defineProps 和 defineEmits

注意：defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的编译器宏

js 为了声明 props 和 emits 选项且具备完整的类型推断，可以使用 defineProps 和 defineEmits API，它们在 <script setup> 中都是自动可用的：

defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的编译器宏。

他们不需要导入，且会在处理 <script setup> 的时候被编译处理掉。defineProps 接收与 props 选项相同的值，defineEmits 也接收 emits 选项相同的值。

defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推断。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。

因此，传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内。

概述

defineProps 和 defineEmits 是 Vue 3 中的两个新特性，用于在组件中定义 props 和 emits。

defineProps 可以让开发者在组件中定义 props，这样就可以在组件内使用类型检查、默认值等属性。

与 Vue 2 不同的是，在 Vue 3 中，props 不再需要在组件实例中声明，而是通过 defineProps 方法进行定义。这样做可以使代码更加简洁明了，同时也提高了代码的可读性。

例如，下面是一个使用 defineProps 定义 props 的示例：

import { defineComponent, defineProps } from 'vue'

const Props = defineProps({
  msg: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})

export default defineComponent({
  props: Props,
  setup(props) {
    // ...
  }
})

defineEmits 则是用于定义组件中的事件。与 Vue 2 相比，Vue 3 中的 emits 不再需要在组件实例中声明，而是通过 defineEmits 方法进行定义。这样做可以使代码更加简洁明了，同时也提高了代码的可读性。

例如，下面是一个使用 defineEmits 定义事件的示例：

import { defineComponent, defineEmits } from 'vue'

const Emits = defineEmits(['update:modelValue'])

export default defineComponent({
  emits: Emits,
  setup(props, context) {
    const handleClick = () => {
      context.emit('update:modelValue', 'new value')
    }

    return {
      handleClick
    }
  }
})

以上就是 defineProps 和 defineEmits 的简单介绍。通过使用这两个方法，可以更加方便地定义组件的 props 和 emits。

子组件

<template>
    <p>{{props.msg}}</p>
    <button @click="handleClick">点击我调用父组件方法</button>
</template>
<script setup lang="ts">
    const props = defineProps({
         msg:{
            type: String,
            default: () => '默认值'
         }
    })
    const  emit = defineEmits(['on-change', 'update'])
    const handleClick = () =>{
        emit('on-change', '父组件方法被调用了')
    }
</script>

父组件

<script setup lang="ts">
    import TestPropsPmit from './components/test-props-emit/index.vue';
    import { ref } from 'vue';
    // 定义字符串变量
    const msg = ref('欢迎使用vite！')
    // 调用事件
    const handleChange = (params:string) =>{
        console.log(params);
    }
</script>
<template></template>
    <TestPropsPmit :msg="msg" @on-change="handleChange"></TestPropsPmit>
</template>