Vue3 Parent-Child Component Communication

📢 This article was translated by gemini-2.5-flash

Alright, article #255! Haven’t had any super special ideas lately, so let’s just dive into some Vue notes.

Introducing Child Components

Define the Child Component

1
2
3
4
5
6
7
8
<script setup>
</script>

<template>
    <div>
        this is a son component
    </div>
</template>

Use in the Parent Component

1
2
3
4
5
6
7
8
9
<script setup>
    import SonCom from '@/components/son-com.vue'
</script>

<template>
    <h2>this is a father component</h2>
    <!-- Direct usage -->
    <SonCom></SonCom>
</template>

Parent Component to Child Component Props

Pass Props from Parent Component

1
2
3
4
5
6
7
8
9
<script setup>
    import SonCom from '@/components/son-com.vue'
</script>

<template>
    <h2>this is a father component</h2>
    <!-- Props passing -->
    <SonCom msg="a msg from father"></SonCom>
</template>

Receive Props in Child Component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script setup>
    // In setup, we use a compiler macro to receive props
    const props = defineProps({
        msg: String
    })
    // Access in script is via object property
    console.log(props.msg)
</script>

<template>
    <div>
        this is a son component
    </div>
    <div>
        <!-- But in template, use the variable name directly -->
        {{ msg }}
    </div>
</template>

Reactive data works too. In the parent component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script setup>
    import {ref} from 'vue'
    import SonCom from '@/components/son-com.vue'

    const count = ref(100)

    const addCount = () => {
        count.value++
    }
</script>

<template>
    <h2>this is a father component</h2>
    <button @click="addCount">add count</button>
    <br/>
    <!-- Props passing -->
    <SonCom msg="a msg from father" :count="count"></SonCom>
</template>

Receive in Child Component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script setup>
    // In setup, we use a compiler macro to receive props
    const props = defineProps({
        msg: String,
        count: Number
    })
    // Access in script is via object property
    console.log(props.msg)
</script>

<template>
    <div>
        this is a son component
    </div>
    <div>
        <!-- But in template, use the variable name directly -->
        {{ msg }} - {{ count }}
    </div>
</template>

But essentially, it’s still receiving data via props just like with the Options API.

Child Component to Parent Component Communication

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script setup>
    // In setup, we use a compiler macro to receive props
    const props = defineProps({
        msg: String,
        count: Number
    })
    // Access in script is via object property
    console.log(props.msg)

    // Define event to emit to parent
    const emit = defineEmits(['minusCount'])
    const minusCountFun = () => {
        emit('minusCount', 5)
    }
</script>

<template>
    <div>
        this is a son component
    </div>
    <div>
        <!-- But in template, use the variable name directly -->
        {{ msg }} - {{ count }}
    </div>
    <div>
        <button @click="minusCountFun">minus count</button>
    </div>
</template>

Then, Receive the Event in the Parent Component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup>
    import {ref} from 'vue'
    import SonCom from '@/components/son-com.vue'

    const count = ref(100)

    const addCount = () => {
        count.value++
    }

    // Receive arguments
    const minusCountFun = (c) => {
        count.value -= c
    }
</script>

<template>
    <h2>this is a father component</h2>
    <button @click="addCount">add count</button>
    <br/><hr/>
    <!-- Props passing, event name must match child component -->
    <SonCom msg="a msg from father" :count="count" @minusCount="minusCountFun"></SonCom>
</template>