vue父子组件、兄弟组件间传值

• 第一种（与v-model做的事情相同）
  特别注意:value必须都是小写

父组件：
getValue (value) {
  console.log(value) 
}
子组件：
props: ['value'] // 接收父组件传递的值
emits:['getValue']

transValue () {
  this.$emit('getValue',this.data.value) // 触发父组件事件
}

• 第二种 父组件向子组件传参(refs)

父组件：
this.$refs.box.getValue(params)
子组件：getValue(params){console.log(params)}

• 第三种 父子组件共同维护props（.sync）

// 父组件

// 子组件
 {{_val}} 
props: {value: String}
this._val = '111'
computed: {
  _val : {
    get () {
      return this.value
    },
    // 触发改变父组件的值
    set (newVal) {
      this.$emit('update:value',newVal)}
    }
}

• 第四种 组件间的传参(EventBus)

// eventBus.js中
export default new Vue()
// in component A
import bus from './eventBus.js'
bus.$emit('plus', 1)
bus.$emit('minus', 1)
// in component B's created hooks
import bus from './eventBus.js'
bus.$on('plus', function (n) {
  this.total += n
})
bus.$on('minus', function (n) {
  this.total -= n
})
// clear in hooks
 beforeDestroy(){
     bus.$off('click')
}

• 第五种 向深层次的子组件传值（依赖注入）

// 祖先组件，作为一个钩子函数，返回一个对象供子组件使用
provide() { 
  return {
    name: 'xxx',
    fn () {},
  } 
}
// 子孙组件
接收属性或方法
inject:['name','fn'] 

• 第六种 （children/parent）

// 父组件中，$children是个数组
this.$children[0].msg
// 子组件中，$parent是个对象
this.$parent.name

• 第七种 组件跨代通信（listeners）

组件的inheritAttrs属性默认为true，继承所有的父组件（除props之外）的所有属性；
inheritAttrs：false 只继承class属性 。
abc组件的关系为，a包含b，b包含c，现在要c获取a的属性或者监听器
// a组件

// b组件

props: ['pChild1'],
inheritAttrs: false, // 不继承
this.$emit('test1'); 
// c组件
props: [ 'name']
触发
this.$emit('test1');
this.$emit('test2');
获取
$attrs // 只有 p-child2、age，因为p-child1、name 为已在组件中声明的props
this.pChild2
this.age