Vue组件间通信方式

组件可以封装一些重用的代码，通过传入不同的数据，实现组件的复用。组件之间传递数据基本上可以分为三种：父子组件、兄弟组件、隔代组件（跨组件），针对不同场景，我们可以选择不同的方式，具体如下：

父子组件通信：

（1）props/$emit

父组件通过自定义属性传递数据，子组件通过props来接收;

子组件通过emit传递一个自定义事件，父组件通过自定义事件来操作相应的逻辑：

父组件：

<template>
    <AppButton :btnContent="'下一步'" @commit="commit()"></AppButton>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
import AppButton from '@/components/app-button/app-button.vue';

@Component({
    components: {
        AppButton
    }
})
export default class EmergencyContact extends Vue {

    commit(): void {
        this.$router.push('loan-check');
    }
}
</script>

*******************************************************************************


子组件：

<template>
    <ion-button expand="block" class="px-3" :disabled="disabled" @click="commit()">
        <template v-if="btnContent">{
  {btnContent}}</template>

        <template v-else>-</template>
    </ion-button>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component({
    components: {}
})
export default class AppButton extends Vue {
    @Prop() disabled!: boolean;
    @Prop() btnContent!: string;

    @Emit('commit')
    commit() {}
}
</script>

 

（2）$parent/$children

子组件通过$parent访问父组件实例；父组件通过$children访问子组件实例：

父组件：

<template>
    <div class="h-100"&