Illustrated Vue3.0 – section 15 component communication

This is the 8th day of my participation in the August Text Challenge.More challenges in August

Father to son (Father -> Son)

props

In component data management, we know that we can use PORps to pass parent component data to child components.

The sample

Generator1.vue

<template>
    <h1>A generation</h1>
    <Generator2 info="I've been handed down from generation to generation."></Generator2>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import Generator2 from '@/components/ data transfer /Generator2';

export default defineComponent({
    setup(){},components: { Generator2 }
})
</script>
Copy the code

Generator2.vue

<template>
    <div>
        <h1>The second generation</h1>
        <span>Message from generation: {{info}}</span>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {},
    props: {
        info: {
            type: String}},data(){},})</script>
Copy the code

slot

Slot is also a way of passing messages from parent components to child components.

The sample

Generator1.vue

<template>
    <h1>A generation</h1>
    <Generator2 info="I've been handed down from generation to generation.">
        <template v-slot:content>
            <h1>slot</h1>
            <div>I'm the stuff of the past generation</div>
        </template>
    </Generator2>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import Generator2 from '@/components/ data transfer /Generator2';

export default defineComponent({
    setup(){},components: { Generator2 }
})
</script>
Copy the code

Generator2.vue

<template>
    <div>
        <h1>The second generation</h1>
        <span>Message from generation: {{info}}</span>
        <slot name="content"></slot>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {},
    props: {
        info: {
            type: String}},data(){},})</script>
Copy the code

Progeny

When multiple generations are passed from top to bottom, you can use props to pass from generation to generation or provider/inject.

The sample

Generator1.vue

<template>
    <h1>A generation</h1>
    <Generator2 info="I've been handed down from generation to generation.">
        <template v-slot:content>
            <h1>slot</h1>
            <div>I'm the stuff of the past generation</div>
        </template>
    </Generator2>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import Generator2 from '@/components/ data transfer /Generator2';

export default defineComponent({
    setup(){},provide: {
        message: 'Heirloom, keep it! '
    },
    components: { Generator2 }
})
</script>
Copy the code

Generator2.vue

<template>
    <div>
        <h1>The second generation</h1>
        <span>Message from generation: {{info}}</span>
        <slot name="content"></slot>
        <Generator3></Generator3>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api';
import Generator3 from '@/components/ data transfer /Generator3';

export default defineComponent({
    setup() {},
    components: { Generator3 },
    props: {
        info: {
            type: String}},data(){},})</script>
Copy the code

Generator3.vue

<template>
    <div>
        <h1>The three generations of</h1>
        <span>Message from generation: {{message}}</span>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {},
    data() {},
    inject: ['message'],})</script>
Copy the code

Child the parent

In the above example, the data flow is top-down, but it can also be sent from bottom to top using on/$emit() events.

The sample

Generator4.vue

<template>
    <h1>The fourth generation</h1>
    <div>
        <span>Content from children: {{childContent}}</span>
    </div>
    <Generator5 v-on:changeContent="change"></Generator5>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import Generator5 from '@/components/ data transfer /Generator5';

export default defineComponent({
    setup(){},components: { Generator5 },
    data() {
        return {
            childContent: ' ',}},methods: {
        change(val) {
            this.childContent = val.content; }}})</script>
Copy the code

Generator5.vue

<template>
    <h1>The five dynasties</h1>
    <button @click="click">button</button>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {},
    methods: {
        click() {
            this.$emit('changeContent', {content: 'I'm passing from child to parent.'}); }}})</script>
Copy the code

conclusion

In addition to the above methods, vuEX is also commonly used for data processing. Since I will study it in detail later, I will not introduce it here. The following bus, which will be explained separately and not covered too much here, is a way of passing data using the listener pattern. There is also the use of choice: parent/parent /parent /children and ref, not active transmission.

Pass down

Props, provider/ Inject, slot, vuex, bus

Pass up

on/emit, vuex, bus,

Irrelevant component passing

Vuex, bus