vue组件之间传值

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息
一.父组件向子组件传值 — props
父组件:

<template>
  <div>
    父组件:
    <input type="text" v-model="name">		//v-model绑定
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
	  import child from './child'		//引入
	  export default {
	    components: {
	      child									
	    },
	    data () {
	      return {
	        name: ''
	      }
	    }
	  }
</script>

子组件：

// An highlighted block
	<template>
	  <div>
    子组件:
    <span>{{inputName}}</span>
 	 </div>
		</template>
		<script>
		  export default {
   	 // 接受父组件的值
  	  props: {
  	    inputName: String,
   	   required: true
 	   }
	  }
	</script>

二.子组件向父组件传值 $emit

三.同级组件之间的传值(创建一个公共js文件)
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
1、在工程src目录下新建一个Pub.js文件
Pub.js
import Vue from “vue”
export default new Vue()
2、在各组件中引入Pub.js文件
import Pub from “…/Pub.js”
3、在A组件中通过$emit调用自定义函数并且传参Pub.$emit(‘namefn’,“str1”,“str2”，……)
4、在B组件中通过$on响应事件并接受参数Pub.$on(‘namefn’,(str1,str2,……) =>{
console.log(str1+“就是A组件中定义的数据”)
})

示例代码：

// An highlighted block
 	公共bus.js
 	//bus.js
	import Vue from 'vue'		//移入Vue
	export default new Vue()		//暴露给Vue这个全局对象

组件A中

// An highlighted block
	<template>
 	 <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
 	 </div>
	</template>
	<script>
	  // 引入公共的bug，来做为中间传达的工具
	  import Bus from './bus.js'
  	export default {
    data () {
      return {
        elementValue: 4
      }
  	  },
  	  methods: {
  	    elementByValue: function () {
   	     Bus.$emit('val', this.elementValue)
    	  }
 	   }
	  }
	</script>

组件B中：

// An highlighted block
	<template>
	  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  	</div>
	</template>
	<script>
 	 import Bus from './bus.js'
 	 export default {
    data () {
      return {
        name: 0
      }
    },
 	mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
  	methods: {
      getData: function () {
        this.name++
 	     }
	    }
	  }
	</script>