你想要知道的Vue组件间数据传递的方式

通过 props 传递属性
父级给demo2组件绑定一个msg数据

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

{{msg}}

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

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

{{$attrs.msg}}

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

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

{{$attrs.msg}}

复制代码
通过provide提供依赖，inject注入依赖实现数据跨多级子组件传递
通过给父级的 provide 提供一个依赖对象，让其所用子组件都能访问到这个对象
“
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
”
其实也就是说provide 和 inject 绑定本身不做额外的事情（数据绑定之类），只是将提供的数据暴露给子组件。那么暴露出来的数据是不是可相应的就取决与数据本身

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

{{msg}}

{{app.$data.msg}}

复制代码
直接访问组件实例的方式获取数据
通过 ref 获取组件实例
ref 属性定义在组件上获取的是组件的vue实例，定义在原生标签上获取的是对应的dom
需要等挂载之后才能拿到$refs中的内容

{{msg}}

复制代码
通过$parent/$children获取组件实例同样的也是必须在mounted之后才能获取对应实例父组件通过$children获取子组件实例

{{msg}}

复制代码
子组件通过$paren获取父组件实例

{{msg}}

复制代码
定义一个公共仓库共享数据
定义 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 共享数据
官方给出的跨多组件传递数据的解决方案。
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: {
}
})
复制代码
在组件中使用

{{this.$store.state.test}} {{test}} {{this.$store.state.test2}} {{test2}}