Component Communication

When developing components, some of our functions may require communication capabilities between components. The component editor supports three main communication methods between components: Component Parameters, Listening to Child Component Events, and Calling Child Component Methods. This chapter will detail these component communication methods.

Component Parameters

When developing components, we follow the basic principle of high cohesion and low coupling. But what if some data in our component is defined by the parent component when it's called?

For example, we have a component that displays an employee's name and age, but the name and age are specified by the parent component. At this time, we need to use the component parameter capability. Let's illustrate with an example.

Effect Diagram

Implementation Steps

1. Child Component Definition

Template

<div style="position:relative;width:100%;height:100%;gap:10px;display:flex;align-items:center;flex-direction:column">
    <div style="display:flex;height:50%;background-color:#D5F0C1;align-items:center;justify-content:center;gap:10px;border-width:1px;border-style:solid;border-color:#333;border-radius:26px;width:100%">
        {{name}} // [!code highlight]
    </div>
    <div style="display:flex;height:50%;background-color:#AAD7D9;align-items:center;justify-content:center;gap:10px;border-width:1px;border-style:solid;border-color:#333;border-radius:23px;width:100%">
        {{age}} // [!code highlight]
    </div>
</div>

Script

export default{
    props:{
        name: String, 
        age: Number 
    }
}

2. Parent Component Imports Child Component

3. Parent Component Passes Parameters to Child Component

Template

<div style="position:relative;width:100%;height:100%;padding:20px">
    <span>Name：</span><input v-model="name" />
    <span>Age：</span><input v-model="age"/ >
    <ifc-cy3nw5uejrlrk :name="name" :age="age" style="margin-top:20px;height:208px" /> // [!code focus]
</div>

Script

export default{
    data(){
        return{
            name: null,
            age: null
        }
    }
}

Listening to Child Component Events

During our development process, we may encounter scenarios where we need to pass data from our component to the parent component or notify the parent component to process some logic. This situation can be achieved through event listening.

Below we will provide an example where a child component inputs content and transmits the input content to the parent component.

Effect Diagram

Implementation Steps

1. Child Component Definition

Template

<div style="display:inline-block">
    <input :value="value" v-on:blur="onBlur" />
</div>

Script

export default{
    props: {
        value: String
    },
    methods: {
        onBlur(e) {
            if(e.target.value !== this.value) {
                // Trigger change event to parent component
                this.$emit('change', e.target.value) 
            }
        }
    }
}

2. Define Events That Can Be Listened to by Child Components Component edit page [Project View] > [Settings] > [Listenable Events] > [Add Event]

3. Import the child component, the import method is the same as above.
4. Parent Component Listens to Events

Template

<div style="padding: 20px">
    <span>
        Child Component Text Box：
    </span>
    <ifc-cke30qzjrt1bz :value="inputStr" v-on:change="onChange" /> // [!code focus]
    <div style="margin-top:10px">
        <span>
            The input content is：{{inputStr}}
        </span>
    </div>
</div>

Script

export default{
    data() {
        return {
            inputStr: null
        }
    },
    methods: {
        onChange(val) { 
            this.inputStr = val; 
        } 
    }
}

Calling Child Component Methods

During our development process, we may encounter situations where we need to provide methods within our component for the parent component to call. For example, if we need the component to have an accordion effect, we can dynamically toggle the display/hide of some detailed information, and we want the parent component to control this behavior.

Effect Diagram

Implementation Steps

1. Child Component Definition

Template

<div>
    <details :open="false" ref="details">
        <summary :hidden="false">
        Click me to open detailed information
        </summary>
        Here is the hidden detailed information
    </details>
</div>

Script

export default{
    methods:{
        toggle() { 
            const isOpen = this.$refs.details.hasAttribute('open'); 
            if(isOpen) { 
                this.$refs.details.removeAttribute('open'); 
            } else { 
                this.$refs.details.setAttribute('open', ''); 
            } 
        } 
    }
}

2. Set Methods That Can Be Called by Child Components

Component edit page [Project View] > [Settings] > [Callable Methods] > [Add]

4. Parent component imports the child component, the import method is the same as above.
5. Parent Component Calls Child Component Method, obtains the component instance through ref, and calls the component method

Template

<div style="position:relative;width:100%;height:100%;padding:20px">
    <button v-on:click="toggle">
        Toggle Detailed Information Status
    </button>
    <ifc-cmb44h4ahmcan style="margin-top:20px" ref="details" /> // [!code highlight]
</div>

Script

export default{
    methods:{
        toggle() {
            this.$refs.details.toggle(); 
        }
    }
}