一、父传参（自定义属性 - props）

父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用.

//父组件代码   渲染子组件
<Son  :sonName="uname" />

 // 子组件代码，接受父参数
export default {
  props: {
     sonName: String
  }
}

二、子传父（自定义事件 - this.$emit）

子组件向父组件传数据使用自定义事件， vue组件提供了一个emit('自定义事件名'， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据

// 父组件代码，渲染子组件
<Son   @pass-value="valueFn" />
export default{
  method:{
    valueFn(value) {}
  }
}
// 子组件代码
this.$emit('pass-value', this.say)

三、兄弟之间的传参

兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 on 接受数据，两者之间的自定义属性名保持一致。

// 传输方组件调用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);

// 接收方接受参数
import Bus from '@/EventBus.js'

created() {
  Bus.$on('pass-value', val => {
     this.sibilingValue = val;
  })
}

四、通过Vuex数据共享

通过vuex存储数据， Vuex是一个专为vue.js 应用程序开发的状态管理模式， 它采用[ 集中式 ]存储管理数据，以相应的规则保证状态以一种可预测的方式发生改变， 一变全变，同步更新数据。

// 注册代码
const store = new Vue.Store({
  state:{
    count: 100
  },
  mutations: {
    addCount(state, val = 1) {
      state.count += val;
    }，
    subCount(state, val = 1) {
      state.count -= val;
    }
  }
})

// 组件调用
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 减 1

五、通过ref

ref 引用可以作用在h5标签上，也可以作用在组标签上，作用在h5标签上是获取的是DOM对象， 作用在组件标签上，通过this.$refs获取的是组件的实例对象。