Vue组件传值的几种方式

最近在准备面试题，发现关于Vue使用方面问的最多的就是这个问题，但是网友们总结的总不是很全，因此在这里整理一下，也方便日后查阅。

一、父传子：prop

父组件：

<son :params='msg' />
import son from './son'
export default {
	data () {
		msg: '数据'
	},
	components: {
		son
	}
}

子组件：

props: {
	params: {
		type: String,
		default() {
			return ''
		}
	}
}

二、子传父：$emit

子组件：

<div @click='sonFunc' />
methods: {
	sonFunc() {
		this.$emit('change', 'sonData')
	}
}

父组件：

<son @change='changeFunc' />
methods: {
	changeFunc(e) {
		console.log(e) // sonData
	}
}

兄弟组件：eventBus ($emit, $on)

新建bus.js

import Vue form 'vue'
export default new Vue

父组件：

<div>
	<components-a />
	<components-b />
</div>

子组件a：

<template>
      <div>
           <button @click='abtn'>A按钮</button>
      </div>
</template>
<script>
import bus from './bus.js'
export default {
      name: 'components-a',
      data () {
        return {
                'msg': '我是组件A'
        }
      },
      methods: {
           abtn () {
                  let  _this = this;
                   //$emit这个方法会触发一个事件
                   bus.$emit('myFun', _this.msg)  
           }
      }
}
</script>

子组件b：

<template>
     <div>
         <div>{{btext}}</div>
     </div>
</template>
<script>
import bus from './bus.js'
export default {
   name: 'components-b',
   data () {
        return {
           'btext': '我是B组件内容'
        }
   },
   created () {
       bbtn () {
            bus.$on('myFun', (message) => {   
            //这里最好用箭头函数，不然this指向有问题
                 this.btext = message
            })
       }
   }
}
</script>

四、父组件更改子组件数据（$refs.son.data）

父组件：

<template>
	<son ref='sons' />
</template>
methods: {
	changeFunc() {
		this.$refs.sons.sonsData = '改成父组件数据'
	}
}

子组件：

<div>{{ sonsData }}</div>
data () {
	sonsData: '我是子组件数据'
}

五、父子组件深传递数据（provide和inject）(待)

六、vuex(待)