vue 组件间传值：父传子 / 子传父 / 子传子 / 祖传孙

父传子(使用props)

父组件发送：
<child :dataToSon="dataToSon"></child>
data(){
  return {
    dataToSon:456
  }
}
子组件接收：
props: {
    dataToSon: {
      type: Number,
      default: 123,
    },
｝

子传父(使用$emit)

父组件：
<div>{{data}}</div>
<child @change-from-son="change"></child>
data(){
  return {
    data:456
  }
}
method:{
  change(n){
    this.data = n
  },
}
子组件调用:
this.$emit('change-from-son',123)

子传子(组件传组件，使用$on)

var app= new Vue()
// 在组件 B 绑定自定义事件
app.$on('id-selected', function (id) {
  console.log(id)
})
// 触发组件 A 中的事件
app.$emit('id-selected', 1)

祖传孙（attrs 与 listeners或者provide 与 inject）

provide 与 inject：

1.版本2.2.0以上
2.主要在开发高阶插件/组件库时使用，不推荐用于普通应用程序代码中

//父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}
//子孙组件注入 'foo'
var Child = {
  inject: {
    from: 'bar',    //from 表示源头 'property'
    foo: { default: 'foo' }    //2.5.0版本以上可以设置默认值
  }
  props: {
    bar: {
      default () {
        return this.foo    // 2.2.1版本以下会在props 和 data 初始化之后得到
      }
    }
  },
  data () {
    return {
      bar: this.foo    // 2.2.1版本以下会在props 和 data 初始化之后得到
    }
  }，
  created () {
    console.log(this.foo)    // => "bar"
  }
  // ...
}

attrs 与 listeners：

$attrs则可以直接获取未在 props 定义的值，class 和 style除外。孙组件要访问父组件的属性和调用方法，一级一级传下去就可以了。

// 父组件
<home title="标题" :num="80" :status="false" :data="{type: 1}"/>    //v-on="{a: f()}"等价于v-on:a="f()"
// 子组件
props: { 
    title: {
        type: String,
        default: ''  
    }
},
mounted() {
    console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }    没有 title: "标题"
},
// 父组件
<home @change="change"/>
// 子组件
mounted() {
    console.log(this.$listeners) // 即可拿到 change 事件
}
//inheritAttrs：false 时
//不会把未被注册的props呈现为普通的HTML属性，依然可以通过其$attrs可以获取到没有使用的注册属性

eventBus与Vuex

eventBus通讯

//方式一
Vue.prototype.$EventBus = new Vue();    //main.js中
this.$EventBus.$emit('eventName', param1,param2,...)    //触发
this.$EventBus.$on('eventName', (param1,param2,...)=>{    //监听
    //...
})
this.$EventBus.$off('eventName')    //移除，没有参数时全部移除，要注意移除，否则容易出现问题
//方式二
window.eventBus = new Vue();    //main.js中
EventBus.$emit('eventName', param1,param2,...)    //触发
EventBus.$on('eventName', (param1,param2,...)=>{    //监听
    //...
})
EventBus.$off('eventName')    //移除，没有参数时全部移除，要注意移除，否则容易出现问题

Vuex

太多，略……