1.props $emit()

export default {
    name: 'Child',
    props: {
        // 父组件通过 <Child @change="changeName" :name="parentName" />
        name: {
            type: String, //类型
            default: '', //默认值
            required: true,//是否必填
            validator: function (value) { 
                return value > 10 
            }
        }
    },
    methods: {
        changeName () {
            this.$emit('change', 需要传递的参数)
        }
    }
}

2.vuex 全局状态管理

3.provide、inject传值

provice/inject传值的方式，适合所有的向下传值类型，层级可以很深，多用于组件开发。业务开发中很少用到。

A组件

// provide作为一个属性使用，和data，methods等统级，将要传递给子孙的属性放在里面
provide() {
    return {
      toSon: 'this is to my son'
    }
},

B、C等子孙组件

// inject是一个对象
inject: {
    toSon: {
      default: '' // 设置接收属性的默认值
    }
 },
 
 // inject也可以是一个数组
 inject:['toSon']

4.attr、listeners传值

*这两个属性都是绑在组件B上面的，组件B起到一个承上启下的作用。 attr用于将A组件传递过来的属性，下传给C组件 listeners用于将C组件发射的数据，上传给A组件 inheritAttrs用于设置属性，当设置为false时候，dom上则不会出现属性。

尚不明确的点inheritAttrs

A组件

<component-b
      :pagination="pagination" // 将属性传递给B和C
      v-on:propToComponentA="listenComponentC" // 监听c组件的事件
 />
 
 methods: {
     listenComponentC(data) {}
 }

B组件

<component-c  v-bind="$attrs" v-on="$listeners"/>
inheritAttrs: false

C组件

  inheritAttrs: false,
  created() {
   console.log(this.$attrs)
   //输出可以发现$attrs对象是A组件传递过来的属性
  },
  methods: {
    propToComponentA() {
      const data = {
        name: '古天乐'
      }
      // b组件，c组件都可以监听事件propToComponentA
      this.$emit('propToComponentA',data)
    }
  },

5.children、parent

$children

在父组件中，通过children可以获得所有无序的子组件组成的数组。注意，当你想用children调用儿子组件中的方法或者参数时候，一定是需要等挂在完毕，在mounted中调用，或者是$nextTick

$parent

子组件可以通过this.$parent获取父组件实例。同样的，打点调用父组件的方法。

6.中央事件总线 emit/on

创建全局响应式变量

一般在main.js中定义一个全局变量，挂在到window下

import Vue from 'vue'
window.eventBus = new Vue()
// 也可以挂载到vue原型链上,二选其一
Vue.prototype.$eventBus = new Vue();

事件挂载到eventBus

C组件

// c组件发射了一名为dataFrom的事件，并挂载了数据this.dataA
this.$eventBus.$emit('dataFrom', this.dataA);

接收eventBus的事件

因为$eventBus是全局，且响应式的，任何一个组件都可以进行接收

this.$eventBus.$on('dataFrom',  function (data) {
     // handle data code
});

如果想接收一次事件后移除，就用$once

this.$eventBus.$once('dataFrom',  function (data) {
     // handle data code
});

移除事件监听

$this.$eventBus.$off('dataFrom')

vue组件间传值方式~