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

2023-07-21 16:03:03 407

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=newVue({
data:{
a:1,
b:2
},
methods:{
log(){
console.log(this.a)
}
}
})

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

通过Vuex共享数据

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

storeindex.js

importVuefrom'vue'
importVuexfrom'vuex'

Vue.use(Vuex)

exportdefaultnewVuex.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组件间数据传递内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

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

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

数据流的方式传递数据

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

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

热门推荐

随机推荐