Vue2.0 父子组件传递值

      很多事情自己经历了一遍，才会明白，看似简单的东西后面都隐藏很多不为人知艰辛。

     今天去看了<<我不是药神>>，很感动，同时也感很无助，很渺小。有些事物很不被大众认可接受，但是却受法律保护，而做些为民有益的事情，却是违法。  相信比我大一些的人很多人怀念厦门某赖姓开车的好处，扯远了。

      正题是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>