Vue组件间通信方式

👁 2021-02-19

了解Vue组件间的通信方式有哪些

1 通信种类

1)父组件向子组件通信
2)子组件向父组件通信
3)隔代组件间通信
4)兄弟组件间通信

2 实现通信方式

1)props
2)vue自定义事件
3)消息订阅与发布
4)vuex
5)slot

2.1 props

1)通过一般属性实现父向子通信
2)通过函数属性实现子向父通信
3)缺点:隔代组件和兄弟组件间通信比较麻烦

Child.vue

<template>
    <h3>子组件</h3>
    <p>{{message}}</p>
    <p>{{age}}</p>
    <!-- 第一种 props_$emit -->
    <button @click="handleChange">点击</button>

    <!-- 第三种 回调函数-->
    <!-- <button @click="messageFun">点击</button> -->
</template>
<script>
export default {
    props: ['message','messageFun'],
    data(){
        return {
            //age: 18
        }
    },
    methods:{
        //第一种
        handleChange(){
            this.$emit('messageChange','Bye')
        },
        //第二种
        // changeAge(){
        //     this.age = 19
        // }
    },
    //第四种
    // computed:{
    //     message(){
    //         return this.$parent.message
    //     }
    // }
}
</script>

Parent.vue

<template>
    <h3>父组件</h3>
    <p>{{message}}</p>
    <!-- 父子组件通信方式：第一种props+$emit -->
    <Child :message="message" @messageChange="message = $event"></Child>


    <!-- 第二种ref -->
    <!-- <Child ref="child"></Child>
    <button @click="handleChangeAge">点击</button> -->

    <!-- 第三种回调函数 -->
    <!-- <Child :message="message" :messageFun="handleChangeMessage"></Child> -->

    <!-- 第四种$parent+$children -->
    <!-- <Child></Child>
    <button @click="changeChild">点击</button> -->
</template>
<script>
import Child from './Child'
export default {
    name:'Parent',
    components: {
        Child
    },
    data(){
        return {
            message:'hello child' 
        }
    },
    methods:{
        //第二种
        // handleChangeAge(){
        //     console.log("点击前"+this.$refs.child.age)
        //     this.$refs.child.changeAge()
        //     console.log("点击后"+this.$refs.child.age)
        // }

        //第三种
        // handleChangeMessage(){
        //     this.message = 'Perfect'
        // }

        //第四种
        // changeChild(){
        //     //第0项，因为一个父组件可能会有很多个子组件
        //     this.$children[0].age = 19
        // }
    }
}
</script>

2.2 vue自定义事件

1)vue内置实现，可以代潜函数类型的props

a.绑定监听:<MyComp eventName="callback"
b.触发(分发)事件: this.$emit("eventName", data)

2)缺点:只适合于子向父通信

2.3消息订阅与发布

1)需要引入消息订阅与发布的实现库，如: pubsub.js

a.订阅消息:PubSub.subscribe( 'msg' , function(msg, data))
b.发布消息: PubSub.publish('msg', data)

2)优点:此方式可实现任意关系组件间通信

2.4 Vuex

1)vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
2)优点:对组件间关系没有限制，且相比于pubsub库管理更集中，更方便

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/02/19/vue-components-communication-method/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------