关于Vue组件间的常用传参方式

目录
  • 组件间常用传参方式
    • 1. props、emit（最常用的父子通讯方式）
    • 2. 事件总线EventBus（常用任意两个组件之间的通讯）
    • 3.Vuex状态管理
  • vue组件传参记录
    • 几个不太常用的组件传值方法记载
    • parent / children 传参调用方法
    • eventBus这个自己安装下
    • provide/inject

组件间常用传参方式

1. props、emit（最常用的父子通讯方式）

父传子

父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用

// 父组件
<hello-world msg="hello world!"><hello-world>

// 子组件
<div>{{msg}}</div>

props：['msg']

子传父

子组件$emit（事件名，传递的参数）向外弹出一个自定义事件，在父组件中监听子组件的自定义事件，同时也能获取子组件传出来的参数

//    子组件
<input v-model="username" @change="setUser">

return {
    username:'tct'
}

methods：{
      setUser(){
          this.$emit('transferUser', username)
      }
}

//    父组件
<hello-world @transferUser="getUser"><hello-world>

return {
    user:''
}

methods：{
      getUser(msg){
          this.user = msg
      }
}

2. 事件总线EventBus（常用任意两个组件之间的通讯）

原理：注册的事件存起来，等触发事件时再调用。定义一个类去处理事件，并挂载到Vue实例的this上即可注册和触发事件，也可拓展一些事件管理

class Bus {
  constructor () {
    this.callbackList = {}
  }

  $on (name, callback) {
    // 注册事件
    this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
  }

  $emit (name, args) {
    // 触发事件
    if (this.callbackList[name]) {
      this.callbackList[name].forEach(cb => cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

// 任意两个组件中
// 组件一：在组件的 mounted() 去注册事件
this.$bus.$on('confirm', handleConfirm)

// 组件二：触发事件(如：点击事件后执行触发事件即可)
this.$bus.$emit('confirm', list)

3.Vuex状态管理

（vue的核心插件，用于任意组件的任意通讯，需注意刷新后有可能vuex数据会丢失）

创建全局唯一的状态管理仓库store,有同步mutations、异步actions的方式去管理数据，有缓存数据getters，还能分成各个模块modules易于维护，详细使用见Vuex官方文档

vue组件传参记录

几个不太常用的组件传值方法记载

在vue项目中，父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯，就会比较麻烦。

parent / children 传参调用方法

vue中打印this可以看到,parent / children 通过这两个方法就可以实现组件传参和调用各自的方法了

eventBus这个自己安装下

通过main.js页面的全局抛出然后再 通过$emit定义传参修改 $on的方式监听变动 $off的方式销毁

provide/inject

父组件注入 子组件抛出给data 在Vue 3中，使用provide/inject，需要先创建一个Symbol类型的token

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE组件传参超详细讲解

    VUE组件传参超详细讲解

    目录 Vue.cli 中怎样使用自定义的组件 Vue 组件如何进行传值的 父组件向子组件传递数据 子组件向父组件传递数据 非父子组件之间传递数据 父传子例子 子传父例子 Vue组件data为什么必须是函数 组件的命名规范 Vue 组件里的定时器要怎么销毁 Vue.cli 中怎样使用自定义的组件 第一步:在 components 目录新建你的组件文件(CounterCom.vue),script一定要export default {} 第二步:在需要用的页面(组件)中导入: import Coun

  • vue组件和iframe页面的相互传参问题及解决

    vue组件和iframe页面的相互传参问题及解决

    目录 vue组件和iframe页面相互传参 vue组件调用iframe页面方法和参数 iframe页面向vue组件传参 内嵌iframe页面并进行传值 vue组件和iframe页面相互传参 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白: 而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参: vue组件调用iframe页面方法

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • Vue路由组件通过props配置传参的实现

    Vue路由组件通过props配置传参的实现

    目录 一.基于params参数传递 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 二.基于Query和params参数传递(通用) 1.index.js(路由配置) 2.Box_1.vue(父路由组件 - 发送参数) 3.Menu_1.vue(子路由组件 - 接收参数) 本文主要介绍了 Vue路由组件通过props配置传参的实现,分享给大家,具体如下: 一.基于params参数传递 1.index.js

  • vue嵌套组件传参实例分享

    vue嵌套组件传参实例分享

    目录 递归嵌套组件参数传递 深层递归组件事件丢失 EventBus 什么事EventBus? 前言: 假设我们已经了解vue组件常见的有父子组件通信,兄弟组件通信.而父子组件通信很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件.那么当两个组件之间不是父子关系,怎样传递数据呢? 先来看一下这个例子: 递归嵌套组件参数传递 我们封装了一个名为 NestedDir 的子组件(嵌套目录的意思),内容如下(用到了element ui组件)

  • 关于Vue组件间的常用传参方式

    关于Vue组件间的常用传参方式

    目录 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 2. 事件总线EventBus(常用任意两个组件之间的通讯) 3.Vuex状态管理 vue组件传参记录 几个不太常用的组件传值方法记载 parent / children 传参调用方法 eventBus这个自己安装下 provide/inject 组件间常用传参方式 1. props.emit(最常用的父子通讯方式) 父传子 父组件传入属性,子组件通过props接收,就可以在内部this.XXX的方式使用 // 父组件

  • 微信小程序页面间跳转传参方式总结

    微信小程序页面间跳转传参方式总结

    前言 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参.缓存和方法调用. URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了. 缓存 虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存. 使用缓存我们有两种方式:小程序自带Storage和vuex.因为我们的项目是基于mpvue的,顺带也用了vuex了 St

  • vue组件间通信六种方式（总结篇）

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • Vue组件间通信 Vuex的用法解析

    Vue组件间通信 Vuex的用法解析

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过npm方式安装的: npm install vuex --save 安装好之后需要再main.js里全局引入: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)new Vue({el:'#app',store,components

  • React组件通信之路由传参(react-router-dom)

    React组件通信之路由传参(react-router-dom)

    目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传

  • 八种Vue组件间通讯方式合集(推荐)

    前言 Vue 提供了各种各样的通讯,其中包括 兄弟间 的通讯和 非兄弟间 的通讯,借此机会做个总结,查阅起来方便.如果喜欢的话可以帮忙点个赞 :+1: 或者关注一下 :yum: 1.props 目录结构 components ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1 代码结构 在父亲组件中使用儿子组件,给儿子通过 :date="xxx" 单向传值 <template> <div> <div>爸爸:{{date}

  • 超详细的vue组件间通信总结

    超详细的vue组件间通信总结

    目录 前言 一.props.$emit单向数据流 二.$parent.$children 三.$attrs.$listeners 四.provide.inject 五.eventBus(事件总线) 六.vuex 七.localstorage 总结 前言 组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attrs.$listeners provide.in

  • Vue实现组件间通信的几种方式(多种场景)

    Vue实现组件间通信的几种方式(多种场景)

    目录 1.Props 父 >>> 子  (Props) 子 >>> 父 ($emit) 2.Bus事件总线 3.Vuex状态管理库 4.Router 5.缓存 以下是我在开发中用到过的vue组件之间的通信方式,不同的场景使用不同的方式,基本满足所有开发场景中的通信需求,从最简单的事例着手,讲述如何使用,话不多说直接开始,满满的干货,建议看完. 1.Props 父 >>> 子  (Props) 一个组件里面引入另外一个组件,此时构成了一种"父子

  • vue的自定义指令传参方式

    vue的自定义指令传参方式

    目录 自定义指令传参 指令 环境 传参方式 自定义指令动态参数 自定义指令传参 指令 在vue官网中,常用指令有v-model和v-bind,但是,如果我们需要对DOM元素进行底层操作,就需要用到自定义指令. 今天主要讲到传参的2种方式. 环境 vue2.3.3 node6.11.2 webpack2.6.1 传参方式 在main.js中定义一个指令. Vue.directive('zoom', {     bind: function (el, binding, vnode) {      

随机推荐