组件间通信

在我们开发组件时，我们的一些功能可能要求组件间具备通信能力。而组件编辑器中支持组件之间的通信方式主要有组件参数、监听子组件事件、调用子组件方法。 本章节将会详细介绍这些组件间的通信方式。

组件参数

在我们开发组件时，都是基于高内聚低耦合的基本原则进行开发。但有时候，我们组件内的一些数据是由父组件调用时定义的话，需要如何处理呢？

例如，我们有一个组件展示员工的姓名和年龄，但是姓名和年龄是通过父组件指定的。这时候我们就需要用到组件参数的能力。下面我们通过一个示例来说明。

效果图

实现步骤

1. 子组件定义

模板

<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}}
    </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}}
    </div>
</div>

脚本

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

2. 父组件引入子组件

3. 父组件传参给子组件

模板

<div style="position:relative;width:100%;height:100%;padding:20px">
    <span>姓名：</span><input v-model="name" />
    <span>年龄：</span><input v-model="age"/ >
    <ifc-cy3nw5uejrlrk :name="name" :age="age" style="margin-top:20px;height:208px" />
</div>

脚本

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

监听子组件事件

在我们开发过程中，可能会遇到需要将我们组件内的数据传递给父组件或者通知父组件做一写逻辑处理的场景。这种情况就可以通过事件监听来实现。

下面我们将提供一个子组件输入内容，并将输入内容传输给父组件的例子。

效果图

实现步骤

1. 子组件定义

模板

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

脚本

export default{
    props: {
        value: String
    },
    methods: {
        onBlur(e) {
            if(e.target.value !== this.value) {
                // 向父组件触发change事件
                this.$emit('change', e.target.value) 
            }
        }
    }
}

2. 定义子组件可监听的事件 组件编辑页面【项目视图】>【设置】>【可监听的事件】>【新增事件】

3. 导入子组件，导入方式同上。

4. 父组件监听事件

模板

<div style="padding: 20px">
    <span>
        子组件文本框：
    </span>
    <ifc-cke30qzjrt1bz :value="inputStr" v-on:change="onChange" />
    <div style="margin-top:10px">
        <span>
            输入的内容是：{{inputStr}}
        </span>
    </div>
</div>

脚本

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

调用子组件方法

在我们开发过程中，可能会遇到需要将我们组件内的方法提供给父组件调用的情况。如我们需要组件具备手风琴效果，可以通过动态开关显示/隐藏部分显示详细信息，而且我们想让父组件来控制这个行为。

效果图

实现步骤

1. 子组件定义

模板

<div>
    <details :open="false" ref="details">
        <summary :hidden="false">
        点击我打开详细信息
        </summary>
        这里是隐藏的详细信息
    </details>
</div>

脚本

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. 设置子组件可调用的方法

组件编辑页面【项目视图】>【设置】>【可调用的方法】>【新增】

4. 父组件导入子组件，导入方式同上。
5. 父组件调用子组件方法，通过ref获取组件实例，并调用组件方法

模板

<div style="position:relative;width:100%;height:100%;padding:20px">
    <button v-on:click="toggle">
        切换详细信息的状态
    </button>
    <ifc-cmb44h4ahmcan style="margin-top:20px" ref="details" />
</div>

脚本

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