vue组件通信的几种方式

最近用vue开发项目，记录一下vue组件间通信几种方式

第一种，父子组件通信

一.父组件向子组件传值

1.创建子组件，在src/components/文件夹下新建一个Child.vue

2.Child.vue的中创建props，然后创建一个名为message的属性

child.png

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

App2.png

4.保存修改的文件，查看浏览器

browser.png

5.我们依然可以对message的值进行v-bind动态绑定

App3.png

此时浏览器中

browser2.png

父组件向子组件传值成功

总结一下：

  • 子组件在props中创建一个属性，用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性
二.子组件向父组件传值

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

Child2.png

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

Child3.png

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

App4.png

4.保存修改的文件，在浏览器中点击按钮

browser3.png

子组件向父组件传值成功

总结一下：

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

第二种，利用总线方式可以平级组件进行通信

无论是父向子传值还是子向父传值，都需要一个中间介质。对于平级组件来说其实也一样，他们也需要一个中间介质来作为一个中央事件总线,

一 .我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下

eventBus.png

eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。

二 . 创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

firstChild.png

我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件，并传递了一个字符串参数

PS:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

三 . 我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值

secondChild.png

我们在mounted中，监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数

PS:

mounted:是一个Vue生命周期中的钩子函数，简单点说就类似于jquery的ready，Vue会在文档加载完毕后调用mounted函数。

$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

四 . 在父组件中，注册这两个组件，并添加这两个组件的标签

App2.png

保存所有修改的文件，然后打开浏览器窗口，内容如下(css请自行处理)

browser.png

点击向组件传值按钮，我们可以看到传值成功

browser2.png

总结：
  • 创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁
  • 在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数
  • 在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

参考原文：https://www.jianshu.com/p/2670ca096cf8，https://www.jianshu.com/p/d946bd7c26f4

第三种 vue高级组件之provide / inject

provide / inject 是 2.2 新增的方法，可以以一个祖先组件向所有子孙后代注入依赖（一个内容）。

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

以上两者可以在父组件与子组件、孙子组件、曾孙子...组件数据交互，也就是说不仅限于prop的父子组件数据交互，只要在上一层级的声明的provide，那么下一层级无论多深都能够通过inject来访问到provide的数据

1.父级组件如下

<template>
<div class="test">
<son prop="data"></son>
</div>
</template>

<script>
export default {
name: ‘Test‘,
provide: {
name: ‘Garrett‘
}
}
 2.孙子组件，注意这里是孙子组件，父级 -> 子组件 -> 孙子组件三个层级关系

<template>
<div>
{{name}}
</div>
</template>

<script>
export default {
name: ‘Grandson‘,
inject: [name]
}
</script>
这里可以通过inject直接访问其两个层级上的数据，其用法与props完全相同，同样可以参数校验等

过去用的 event-bus 虽然可以解决深层问题，但是会导致整个 event-emit 组成过于混乱，难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。

在 React 中 Context 的 Provider / Consumer 也有相同的效果，由于还没有具体使用过，对 React 本身也只有一面之缘，留待以后在了解，感兴趣的同学可以 阅读文档了解。

当然它的作用还有很多，比如vue 路由参数变化，页面不刷新，provide /inject 完美解决方案（https://blog.csdn.net/weixin_36934930/article/details/80552333）

参考原文：https://blog.csdn.net/Garrettzxd/article/details/81407199

第四种 vuex

状态管理模式、集中式存储管理 一听就很高大上，蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

vuex里面都有些什么内容？

Talk is cheap,Show me the code. 先来一段代码间隔下这么多的文字：

const store = new Vuex.Store({
    state: {
        name: ‘weish‘,
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit(‘SET_AGE‘, 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

这个就是最基本也是完整的vuex代码；vuex 包含有五个基本的对象：

  • state：存储状态。也就是变量；
  • getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
  • mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE‘, 18)。和vue中的methods类似。
  • actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn‘)。
  • modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

vue-cli中使用vuex的方式

一般来讲，我们都会采用vue-cli来进行实际的开发，在vue-cli中，开发和调用方式稍微不同。

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2

state.js示例：

const state = {
    name: ‘weish‘,
    age: 22
};

export default state;

getters.js示例（我们一般使用getters来获取state的状态，而不是直接使用state）：

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

mutation-type.js示例（我们会将所有mutations的函数名放在这个文件里）：

export const SET_NAME = ‘SET_NAME‘;
export const SET_AGE = ‘SET_AGE‘;

mutations.js示例：

import * as types from ‘./mutation-type.js‘;

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

actions.js示例（异步操作、多个commit时）：

import * as types from ‘./mutation-type.js‘;

export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

modules--m1.js示例（如果不是很复杂的应用，一般来讲是不会分模块的）：

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

index.js示例（组装vuex）：

import vue from ‘vue‘;
import vuex from ‘vuex‘;
import state from ‘./state.js‘;
import * as getters from ‘./getters.js‘;
import mutations from ‘./mutations.js‘;
import actions from ‘./actions.js‘;
import m1 from ‘./modules/m1.js‘;
import m2 from ‘./modules/m2.js‘;
import createLogger from ‘vuex/dist/logger‘; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== ‘production‘; // 开发环境中为true，否则为false

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

最后将store实例挂载到main.js里面的vue上去就行了

import store from ‘./store/index.js‘;

new Vue({
  el: ‘#app‘,
  store,
  render: h => h(App)
});

在vue组件中使用时，我们通常会使用mapGetters、mapActions、mapMutations，然后就可以按照vue调用methods和computed的方式去调用这些变量或函数，示例如下：

import {mapGetters, mapMutations, mapActions} from ‘vuex‘;

/* 只写组件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            ‘name‘,
            ‘age‘
        ])
    },
    methods: {
        ...mapMutations({
            setName: ‘SET_NAME‘,
            setAge: ‘SET_AGE‘
        }),
        ...mapActions([
            nameAsyn
        ])
    }
};

参考原文：https://segmentfault.com/a/1190000012015742以上就是尝试过的vue组件几种通信方式，总结下，以免后面忘记

原文地址：https://www.cnblogs.com/yszblog/p/10135969.html

时间： 2024-11-07 17:48:22

vue组件通信的几种方式的相关文章

React组件通信的几种方式

需要组件之进行通信的几种情况? 父组件向子组件通信?? 子组件向父组件通信?? 跨级组件通信?? 没有嵌套关系组件之间的通信? 1. 父组件向子组件通信React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息?Child.jsximport?React?from?'react';import?PropTypes?from?'prop-types';export?default?function?Child({?name?})?{????return?

Vue组件通信模式

概述 在Vue.js中,有几种我们能用的内部组件通信的方法.一般的属性和事件对于大多数场景来说已经够用了,但是除此之外,还有其他可用的方法. 属性和事件 当然,一般的通信方法用到了属性和事件.这种常用的模式是组件中一种强大的通信方式,它不用在相关的组件上引入任何依赖和限制. 属性 属性允许你传递任意的数据类型到一个子组件中,并且允许你控制组件接收何种类型的数据.属性的更新也是响应式的,这使得无论任何时候,父组件的数据改变,子组件就会更新. 模板用法: 123 <my-component v-bi

分布式通信的几种方式

RPC(remote produce calL) RPC是远程过程调用协议,它是基于C/S模型调用的机制,客户机向服务器端发 送调用请求等待服务器应答,是一种典型的请求应答机制,大致过程可以理解为本地分布式对象向本机发请求,不用自己编写底层通信本机会通过网络向服务器发送 请求,服务器对象接受参数后,经过处理再把处理后的结果发送回客户端. 它是早期的支持分布式一些,缺点rpc是面向过程的远程调用,不支持面向对象,所以现在用的人就少了. 不支持异步调用 RMI(remote method invoc

Vue 组件通信

今天学习了,vue组件通信本篇随笔主要对今天的学习成果进行总结.有什么不对的地方还望谅解! 首先,Vue的核心即组件化开发,所以组件通信就显得十分重要. 组件通讯包括:父子组件间的通信和兄弟组件间的通信. 1.子组件获取父组件中数据间: var Child={ template:"#child", props:['mes'], data:function(){ return { data:this.$props.mes, //调用该子组件 props 中的对应属性的属性值: } } 通

IPC进程之间通信的几种方式

概念 进程间通信就是在不同进程之间传播或交换信息,那么不同进程之间存在着什么双方都可以访问的介质呢?进程的用户空间是互相独立的,一般而言是不能互相访问的,唯一的例外是 共享内存区 .但是,系统空间却是“公共场所”,所以内核显然可以提供这样的条件. 除此以外,那就是双方都可以访问的 外设 了.在这个意义上,两个进程当然也可以通过磁盘上的普通文件交换信息,或者通过“注册表”或其它数据库中的某些表项和记录交换信息.广义上这也是进程间通信的手段,但是一般都不把这算作“进程间通信”.因为那些通信手段的效率

进程间通信和线程间通信的几种方式

进程间通信和线程间通信的几种方式 进程和线程的区别 概念 对于进程来说,子进程是父进程的复制品,从父进程那里获得父进程的数据空间,堆和栈的复制品. 而线程,相对于进程而言,是一个更加接近于执行体的概念,可以和同进程的其他线程之间直接共享数据,而且拥有自己的栈空间,拥有独立序列. 共同点 它们都能提高程序的并发度,提高程序运行效率和响应时间.线程和进程在使用上各有优缺点. 线程执行开销比较小,但不利于资源的管理和保护,而进程相反.同时,线程适合在SMP机器上运行,而进程可以跨机器迁移. 不同点 多

详解vue 路由跳转四种方式 (带参数)

详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1. 不带参数  <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name /

vue.js学习笔记（4）— 父子组件之间通信的第一种方式 props 和 $emit

我们知道,vue组件中,父组件把数组传递给子组件的话,通常是使用props传递,而vue规定,prop是只能单向下行传递的,那么子组件要怎么才能实现数据的向上传递呢,这里引述一个概念:"父子组件的关系:prop向下传递,事件向上传递",上一篇文章当中,关于数据向上传递用到的事件方法 $emit() 也进行了详细的说明,不懂的童鞋可以翻回去看一下.下面就是今天要说的父子组件相互通信的问题,点击效果依次如下: 代码如下: <!DOCTYPE html> <html>

React 中组件间通信的几种方式

在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通信父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理.演示代码:父组件 parent.js: import React,{ Component } from "react"; export default class App extends Component{