defineProps

defineProps 用于声明组件接收的属性(props)。通过这个宏,可以指定组件期望从父组件接收哪些属性,以及它们的类型和默认值。这有助于提高代码的可读性和可维护性,同时减少错误。
使用示例:

import { defineProps } from 'vue'

const props = defineProps({
  name: String,
  age: Number,
  default: {
    value: '',
    type: String
  }
})

defineEmits

defineEmits 用于声明组件可以触发的事件。通过这个宏,可以明确指出组件能够发出哪些事件,以及这些事件的验证函数。这有助于避免因事件名错误而导致的运行时错误。

使用示例:

import { defineEmits } from 'vue'

const emits = defineEmits(['update', 'submit'])

function handleUpdate() {
  emits('update')
}

function handleSubmit() {
  emits('submit')
}

父子通信

父传子通信
父组件中给子组件绑定属性,子组件内部通过defineProps接收数据

父组件:

<script setup> //引入子组件
    import sonComVue from './son.vue'
</script>
<template>
    <!-- 1.绑定属性message -->
    <div>父组件</div><br>
    <sonComVue message="this is app message "/>
</template>

子组件:

<script setup>
//2.通过defineProps"编译器宏"接收子组件传递的数据
const props = defineProps({
    message: String
})
</script>
 
<template>
    <div>
        子组件:{{ message }}
    </div>
</template>

效果如下:
在这里插入图片描述

子传父通信
父组件中给子组件标签通过@绑定自定义事件,子组件内部通过 defineEmits编译器宏生成emit方法。

父组件:

<script setup>
    //引入子组件
    import sonComVue from './son-com.vue '
    //自定一函数方法
    const getMessage = (msg)=> {
        console.log(msg)
    }
</script>
<template>
    <!--1.绑定自定义事件-->
    <sonComVue @get-message="getMessage">
</template>

子组件:

<script setup>
// 2.通过 defineEmits编译器宏生成emit方法
    const emit = defineEmits(['get-message'])
    const sendMsg = () => {
        // 3.触发自定义事件并传递参数
        emit(' get-message ', 'this is son msg ')
    }
</script>
<template>
    <button @click="sendMsg">sendMsg</button>
</template>

在这里插入图片描述
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐