很多事情自己经历了一遍，才会明白，看似简单的东西后面都隐藏很多不为人知艰辛。
今天去看了<<我不是药神>>，很感动，同时也感很无助，很渺小。有些事物很不被大众认可接受，但是却受法律保护，而做些为民有益的事情，却是违法。 相信比我大一些的人很多人怀念厦门某赖姓开车的好处，扯远了。
正题是VUE2.0中父子组件间传递值，网上很多，我只是工作需要，初入VUE，简单记录：
在rountes.js中加入:
import parent from './views/reportPlatform/parent.vue' let routes = [ { component: Home, name: 'test', iconCls: 'fa fa-file-text-o', children: [ { path: '/parent', component: parent, name: 'parent' }, ], } ] export default routes;父组件 parent.vue：
<template> <div id="test">父页面传入Product Type到子页面: {{productType}} <!-- :productType可以为任意名字，注意是冒号:开头，用来子组件获取父组件的值--> <!-- @dataToParent为子组件this.$emit的第一参数，getChildData为处理子组件数据的方法--> <Child :productType='productType' @dataToParent='getChildData'></Child> <p>{{childData}}</p> </div> </template> <script> //引入子组件 import Child from './hello' export default { data(){ return { productType: 1, childData:'' } }, name:'test', components: { Child }, methods:{ getChildData:function(data){ this.childData = data } } } </script> 子组件hello.vue： <template> <div> 子组件 <!--接收父组件的传递过的值--> '通过productType:' {{productType}} <br/> '通过computed：' {{getMessage}} <br/> <!-- 调用sendMsg发送子组件的数据,也可以把此方法放到mounted中 --> <button @click='sendMsg'>子组件的值传递到父页面</button> </div> </template> <script> export default { //注意这里， props接收父组件传递的属性: props: ["productType"], data(){ return { pt: this.writeResult, dataToParent: 'Hello, I am from child' } }, mounted(){ this.writeResult() }, methods:{ writeResult:function(){ console.log('parent result: ' + this.productType) this.pt = this.productType console.log('pt: ' + this.pt) return this.pt }, sendMsg(){ // 发送子组件数据，dataToParent为参数，可以通过 @dataToParent='xxxx'接收,this.dataToParent为传递的具体值，可以传递更多值 this.$emit('dataToParent',this.dataToParent) } }, computed:{ //VUE 2.0推荐使用computed处理父组件传递的值 getMessage(){ return this.productType } } } </script>