Vue组件间数据传递的方式(3种)

vue中传递数据的方式有哪些

数据流的方式传递数据

通过 props 传递属性

父级给demo2组件绑定一个msg数据

父组件

子组件通过定义props来使用msg，$emit触发外部的函数来改变父级传入的值

子组件

通过 $attrs 来收集属性

$attrs 会收集组件上绑定的属性，对应class和style不会处理。如果与props同用，props的优先级要高于attrs

父组件

子组件中this.$attrs会收集组件上绑定的属性

子组件

通过$listeners 来收集方法

$listeners 会收集组件上绑定的方法。 可以通过传递实参的方式改变父组件的值

父组件

子组件中this.$listeners会收集绑定在组件上的方法。通过this.$listeners.XXX()可以直接调用，以此可以来修改父组件data中的值

子组件

通过provide提供依赖，inject注入依赖实现数据跨多级子组件传递

通过给父级的 provide 提供一个依赖对象，让其所用子组件都能访问到这个对象

“
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
”

其实也就是说provide 和 inject 绑定本身不做额外的事情（数据绑定之类），只是将提供的数据暴露给子组件。那么暴露出来的数据是不是可相应的就取决与数据本身

父组件

后代的子组件可以通过reject注入相应的依赖

子组件

直接访问组件实例的方式获取数据

通过 ref 获取组件实例

ref 属性定义在组件上获取的是组件的vue实例，定义在原生标签上获取的是对应的dom

需要等挂载之后才能拿到$refs中的内容

父组件

子组件

通过\$parent/$children 获取组件实例

同样的也是必须在mounted之后才能获取对应实例

这里是父组件展示子组件中的msg，子组件展示父组件的msg

父组件通过$children获取子组件实例

父组件

子组件通过$paren获取父组件实例

子组件

定义一个公共仓库共享数据

定义 eventBus 共享数据

在Vue原型上添加一个$bus为一个新的vue对象，可以在全局的vue实例中通过$bus获取到这个vue对象，从而获取这个对象上的属性和方法。

在main.js中定义

Vue.prototype.$bus = new Vue({
 data:{
 a:1,
 b:2
 },
 methods:{
 log(){
  console.log(this.a)
 }
 }
})

全局Vue实例都能获取到定义在$bus上的属性和方法

通过 Vuex 共享数据

官方给出的跨多组件传递数据的解决方案。

store index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 test:'123123123',
 test2:'123123123',
 },
 mutations: {
 changeTest(state,payload){
  console.log(state,payload)
  state.test = payload.value
 },
 changeTest2(state,payload){
  console.log(state,payload)
  state.test2 = payload.value
 }
 },
 actions: {
 asyncChageTest({commit},payload){
  setTimeout( ()=>{
  commit('changeTest2',payload)
  },2000)
 }
 },
 modules: {
 }
})

在组件中使用

以上就是对Vue中组件间数据传递的方式进行了一个总结，在日常的开发中还是需要根据使用的场景采取合适的方式进行数据的传递

到此这篇关于Vue组件间数据传递的方式(3种)的文章就介绍到这了,更多相关Vue组件间数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！