vue组件间方式总结

 

组件间通信的方案

• 父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
• 复杂关系的组件数据传递可以通过vuex存放共享的变量
• 通过Vue原型共享数据
• 本地存储的方式
• 父组件向子组件还可以使用插槽：动态传递标签

$bus的使用：

可以用于兄弟组件间或者无关系的组件间通信

1、在main.js中：

Vue.prototype.$bus = new Vue()

2、a.vue文件中：

this.$bus.$emit('msg',10000)

　　Event.$emit('msg',this.msg)------发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是传递的数值；

3、b.vue文件中：

this.$bus.$on('msg',v=>{
    console.log(v)
})

Event.$on('msg',function(msg){}------接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

4、需要注意的是使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus，不销毁的话会一直叠加的调用这个方法

beforeDestroy(){
    this.$bus.$off('msg')
}

 

attrs与listeners的使用：

参见：https://www.cnblogs.com/dhui/p/12931953.html　

 

通过Vue原型共享数据方法：

eg：

// main.js中这样写：
Vue.prototype.commonData='www.baidu.com'

// 应用文件中使用如下：
created(){
  console.log(this.commonData)
}

// 也可以改变值，但只针对于当前使用，如果别的也页面依旧使用的话还是原来定义的值
created(){
   this.commonDate='www.360.com'
   console.log(this.commonData)
}