Vue 组件通信的几种方式

vue通信方式简介

在Vue.js中,组件间通信可以通过props、$emit、事件总线、Vuex以及Provide/Inject等方式来实现,总的来说,组件通信是现代前端开发中不可或缺的一部分,它可以帮助开发者构建更加模块化、可维护和可扩展的应用。

  1. Props / $emit:

    • Props:通过props属性将数据从父组件传递给子组件。
    • **emit**:在子组件中通过emit方法触发自定义事件,父组件可以监听这些事件来接收子组件传递的数据。
  2. 事件总线(Event Bus):

    • 创建一个空的Vue实例作为事件总线,在需要通信的组件中都可以通过该实例进行事件的触发和监听。
    • 可以使用$on方法监听事件,使用$emit方法触发事件。
  3. Vuex复杂的单页应用数据管理

    • Vuex是Vue.js的官方状态管理工具,适用于大型应用中组件间的状态共享和通信。
    • 它通过一个全局的store来管理应用的状态,并提供了一系列的API来实现状态的读取、修改和监听。
  4. Provide / Inject

    • 父组件通过provide选项提供数据,子组件通过inject选项来注入这些数据。
    • 这种方式可以实现跨层级组件间的通信,但要注意不要滥用,以免造成组件间的耦合度过高。

以上具体使用哪种方式取决于你的项目需求和组件之间的关系。对于简单的通信,可以使用props / $emit;对于较复杂的状态管理和多组件之间的通信,可以考虑使用Vuex;对于跨层级的通信或者跨多个组件的通信,可以考虑使用Provide / Inject或事件总线。

一、props

方法一:props

使用props,父组件可以使用props向子组件传递数据。

父组件vue模板father.vue

javascript 复制代码
<template>
    <child :msg="message"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

子组件vue模板child.vue

javascript 复制代码
<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

方法二 使用children 【使用[children](https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23vm-children "$children")可以在父组件中访问子组件。】

二、子组件向父组件通信

方法一:使用vue事件

父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。

父组件vue模板father.vue

javascript 复制代码
<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子组件vue模板child.vue

javascript 复制代码
<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>

方法二: 通过修改父组件传递的props来修改父组件数据

这种方法只能在父组件传递一个引用变量时可以使用,字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址,所以修改了子组件中props的数据即修改了父组件的数据。【不建议】

方法三:使用parent使用[---\>parent](https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23vm-parent "--->$parent")可以访问父组件的数据。

三、非父子组件、兄弟组件之间的数据传递

非父子组件通信,Vue官方推荐使用一个Vue实例作为中央事件总线

Vue内部有一个事件机制,可以参考源码

$on方法用来监听一个事件。

$emit用来触发一个事件。

javascript 复制代码
/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');

四、多层级父子组件通信:

在Vue1.0中实现了broadcast与dispatch两个方法用来向子组件(或父组件)广播(或派发),当子组件(或父组件)上监听了事件并返回true的时候会向爷孙级组件继续广播(或派发)事件。但是这个方法在Vue2.0里面已经被移除了。

其实这两个方法内部实现还是用到的还是**parent以及children** ,用以遍历子节点或是逐级向上查询父节点,访问到指定组件名的时候,调用**$emit**触发指定事件。

相关推荐
cy玩具21 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json