Vue组件传值的方式(手把手教你组件传值的五种方法)

 分类:vue教程时间:2022-06-10点击: 2022前端视频教程(自学必看)

Vue组件传值的方法也就是组件之间的传值方式,本文介绍Vue组件传值的五种方法:父子组件之间的传值、父组件向下子组件传值、访问父、子组件、EventBus、Vuex,今天手把手教你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当项目遇到以下两种场景时:

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

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

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: