SoFunction
Updated on 2025-03-03

Example of usage of defineEmits and defineProps in vue3

Usage of defineEmits/defineProps in vue3 setup syntax sugar

Both APIs are used in setup syntax sugar and do not need to be introduced

defineProps: The parent component passes parameters to the child component

defineEmits: Call the parent component's callback function in the child component and can pass parameters

/api/#defineprops-defineemits

defineEmits

Parent component binding binds custom events in child component, and child components are availableemitsimplement

  • Parent component binding event:@increase="handleIncrease"

  • Parent component callback function:const handleIncrease = (num: number) => {}

  • Subcomponent definitionemit：

// ts proprietaryconst emits= defineEmits<{
    (e: 'increase', num: number): void
}>()

// js
let emits = defineEmits(['startChange', 'endChange'])
  • Subcomponent callemit 
emits('increase', 1);

Parent component

<template>
  <section class="parent">
    <childVue :num="nums" @increase="handleIncrease"></childVue>
  </section>
</template>

<script setup>
  import childVue from './';
  import { ref } from 'vue';
  const nums = ref(0);
    
  // Callback function  const handleIncrease = (num: number) => {
     += num;
  };
</script>

Subcomponents

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
// ts proprietaryconst emits= defineEmits<{
    (e: 'increase', num: number): void
}>()
            
const handelClick = () => {
    emits('increase', 1);
};
</script>

defineProps

Parent component can directly pass values ​​to child component (read-only)

Parent component

<template>
    <div class="Father">
        <p>I'm the parent component</p>
        <!--  -->
        <son :ftext="ftext"></son>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
import Son from './'
const ftext = ref('I am the parent component-text')
</script>

Subcomponents

<template>
    <div class="Son">
        <p>I'm a child component</p>
       <!-- Shows the value from the parent component Use directly here-->
       <p>Received value：{{ftext}}</p>
    </div>
</template>
    
<script setup>
import {ref} from 'vue'
// se

//defineProps to receive the component's pass valueconst props = defineProps<{
    ftext: string,
}>()

// Complex writingconst props = defineProps<{
    ftext: {
        type: string,
        required: false,
        default: 'hhh'
    }
}>()


// Use it here</script>

props two-way binding

When we want to turn the parameters passed by the parent component into two-way binding,Can be read or written

  • v-model:sideCollapse="sideCollapse"
  • It is equivalent to binding one more custom eventupdate:sideCollapse
  • emits('update:sideCollapse', the value to be changed)

Parent component

<script setup lang="ts">
import { ref } from 'vue'

let sideCollapse = ref(false)
</script>

<template>
    <nav-header v-model:sideCollapse="sideCollapse"></nav-header>
</template>

Subcomponents

const props = defineProps&lt;{
    sideCollapse: boolean,
}&gt;()

// let emits = defineEmits(['update:sideCollapse']) js writing method
// ts writing methodconst emits = defineEmits&lt;{
    (e: 'update:sideCollapse', sideCollapse: boolean): void
}&gt;()


function toggle() {
    // = ! Cannot be modified directly!    
    // To modify this    emits('update:sideCollapse', !)
}

This is the article about the usage of defineEmits/defineProps in vue3. For more relevant usage of defineEmits/defineProps, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!