Vue组件之间的两种常用通信方式

最新推荐文章于 2024-06-26 09:20:14 发布

JabamiLight

最新推荐文章于 2024-06-26 09:20:14 发布

阅读量374

点赞数

文章标签： Vue

本文链接：https://blog.youkuaiyun.com/a568478312/article/details/102837818

版权

本文总结了Vue框架中组件间的通信方式，包括父子组件的 props 传值和子组件通过 $emit 调用父组件方法，以及非父子组件间使用事件总线（EventBus）进行通信的实现。通过实例代码展示了如何在Vue中进行组件间的有效通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近都一直学习Vue的知识，看了不少视频，之前完全不了解前端知识，所以还是遇到很多困难，
用惯了强类型语言来看js的代码真的有种感觉随笔写都不影响编译的感觉。
今天总结一下Vue中的组件传值问题。这里使用的demo直接vue init webpack-simple **** 命令初始化的。

父子组件通信

父组件传递给子组件多重类型
在这里插入图片描述
我们可以在props中做类型检测，下面看父子组件的代码。
父组件通过传值，子组件直接调用或者emit调用父组件的方法，父组件也可以直接拿到子组件的引用，直接使用子组件的值或者方法。


<template>
  <div>
    <h2>子组件</h2>
    <input type="button" @click="log" value="click">
  </div>
</template>

<script>

    export default {
        name: "Child",
        data() {
            return {
                ownMsg: '子组件的msg'
            }
        },
        methods: {
            childLog() {
                console.log('子组件Log')
            },
            log() {
                console.log(this.passMsg)
                console.log(this.obj)
                //这是传过来的parent
                this.parent.change()
                //这是直接获取
                this.$parent.change()
                this.func1()
                this.$emit('func2')
            }
        },
        props: {
            passMsg: {
                type: String,
            },
            obj: {
                type: Object,
            },
            parent: {
                type: Object
            },
            func1: {
                type: Function
            }
        }
    }
</script>

<style scoped>

</style>

父组件

<template>
  <div>
    <h1>父组件</h1>
    <h2> {{ msg }}</h2>
    <input type="button" @click="childFunc" value="click">
    <Child
      ref="child"
      passMsg="msg"
      :func1="change"
      :obj="obj"
      :parent="this"
      @func2="change"
    >
    </Child>
  </div>

</template>

<script>
    import Child from "./Child";

    export default {
        name: "Parent",
        data() {
            return {
                msg: "我是父组件的msg",
                obj: {
                    name: "gg",
                    age: 15

                }
            }
        },
        methods: {
            change() {
                console.log('父组件log')
            },
            childFunc(){
                const c =  this.$refs.child
                c.childLog()
                console.log(c.ownMsg)

            }
        },
        components: {Child},
        comments: {
            Child
        }
    }
</script>

<style scoped>

</style>

非父子组件通信

非父子组件传值就有点类似于安卓中使用的EventBus了，我们首先准备一个event.js


import Vue from 'vue'
let VueEvent = new Vue()

export default VueEvent

新建一个兄弟组件,Brother.vue，这里点击按钮会发送内容到一个事件中去，如果有监听，就会触发对应的方法。

<template>


  <div>

    <h2>兄弟组件</h2>
    <input type="input" value="click" v-model="ownMsg">
    <input type="button" value="click" @click="send">
  </div>

</template>

<script>
    import VueEvent from "../model/event";

    export default {
        name: "Brother",
        data() {
            return {
                ownMsg: '兄弟的msg'
            }
        },
        methods: {
            send() {
                VueEvent.$emit('to_msg', this.ownMsg)
            }
        }
    }
</script>

<style scoped>

</style>

再看看Child.vue

<template>
  <div>
    <h2>子组件</h2>
    <input type="button" @click="log" value="click">
  </div>
</template>

<script>
    import VueEvent from "../model/event";

    export default {
        name: "Child",
        data() {
            return {
                ownMsg: '子组件的msg'
            }
        },
        methods: {
            childLog() {
                console.log('子组件Log')
            },
            log() {
                console.log(this.passMsg)
                console.log(this.obj)
                //这是传过来的parent
                this.parent.change()
                //这是直接获取
                this.$parent.change()
                this.func1()
                this.$emit('func2')
            }
        },
        props: {
            passMsg: {
                type: String,
            },
            obj: {
                type: Object,
            },
            parent: {
                type: Object
            },
            func1: {
                type: Function
            }
        },
        mounted() {
            VueEvent.$on('to_msg', function (data) {
                console.log(data);
            })
        }
    }
</script>

<style scoped>

</style>