当前位置:首页 > 技术文章 > 正文内容

vue:组件中之间的传值(vue组件之间传参)

一、父子组件之间的传值----props/$emit

  • 1、父组件向子组件传值--props
  • 2.子组件想父组件传值-this.$emit('select',item)

二、父组件向下(深层)子组件传值----provide/inject

provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

三、访问父、子组件----ref、$parent/$child

1、ref--在父组件中访问子组件

this.$refs.usernameInput

2、父、子组件之间的访问

子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中

四,EventBus

在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。


1、初始化——全局定义
全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.
//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();
2、触发事件
//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
 //使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)
3、监听事件

//使用方式一定义时
this.$EventBus.$on('eventName', (param1,param2,...)=>{
  //需要执行的代码
})
//使用方式二定义时
EventBus.$on('eventName', (param1,param2,...)=>{
  //需要执行的代码
})
4、移除监听事件
为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。
//使用方式一定义时
this.$EventBus.$off('eventName');

五、Vuex当项目遇到以下两种场景时

多个组件依赖于同一状态时。

来自不同组件的行为需要变更同一状态。

相关文章

供热收费管理系统(供热收费管理系统有哪些)

今天来了解《#供热收费管理系统》,它包括如下功能:街道小区设置表格界面,热费标准设置表格界面,优惠设置表格界面,滞纳金设置表格界面,余热比例设置表格界面,用户录入信息窗口,用户档案表格界面,用户录入信...

宽带客户收费管理系统--维修版(宽带售后服务)

宽带客户收费管理系统--维修版headerfooter《宽带客户收费管理系统——维修版》是一款适合宽带运营商使用的管理系统。软件主要包括以下功能:1.主要功能包括用户开户、收费录入、工单登记、故障处理...

八款值得尝试的精美的Linux发行版,你用过哪几款?

Linux发行版各式各样,每个发行版都有自己的特点,在这篇文章中,将会列出让一些另 Linux 用户印象最深刻且精美的 Linux 发行版,包括对初学者友好和流行的发行版。elementary OSe...

据说是可以替代 Windows 的 5个 Linux 发行版

现如今有数以千计的 Linux 发行版可供您使用,然而人们却无法选择一个完美的操作系统来替代 Windows。 使用 Windows 时,傻瓜都能操作自如,同样的方法却不适用于 Linux。在这里,您...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。一、父传子( defineProps )父组件主要通过使用...