Vue 兄弟组件通信方式

👁 2021-02-22

了解 Vue2.x 兄弟组件间如何进行通信

本篇先讲解一种较为简单的方式，其余通信方式请移步Vue组件间通信的方式

小案例（使用props+$emit）

首先利用props，将Parent.vue中的message传递到各子组件中，然后Child组件绑定事件，利用$emit传递数据，然后父组件中利用函数进行处理。
注意，message的改变影响了Parent.vue中的改变

Parent.vue

<template>
    <div>
        <h1>父组件</h1>
        <p>{{message}}</p>
        <hr>
        <Child :message="message" @childOneClick="handleChildOneClick"></Child>
        <hr>
        <Child2 :message="message"></Child2>
    </div>

</template>
<script>

import Child from './Child'
import Child2 from './Child2'
export default {
    data(){
        return {
            message: 'hello child'
        }
    },
    components: {
        Child,
        Child2
},
methods:{
    handleChildOneClick(message){
        this.message = message
    }
}
}
</script>

Child.vue

<template>
    <div>
        <h1>Child子组件</h1>
        <p>{{message}}</p>
        <button @click="handleOneClick">点击</button>
    </div>
</template>
<script>

export default {
    props: ['message'],
    data(){
        return {

        }
    },
    methods:{
        handleOneClick(){
            this.$emit('childOneClick','hello child2')

        }
    }
}
</script>

Child2.vue

    <template>
    <div>
        <h1>Child2子组件</h1>
        <p>{{message}}</p>
    </div>
</template>
<script>

export default {
    props: ['message'],
    data(){
        return {

        }
    }
}
</script>

结果如下图所示