很多事情自己经历了一遍,才会明白,看似简单的东西后面都隐藏很多不为人知艰辛。
今天去看了<<我不是药神>>,很感动,同时也感很无助,很渺小。有些事物很不被大众认可接受,但是却受法律保护,而做些为民有益的事情,却是违法。 相信比我大一些的人很多人怀念厦门某赖姓开车的好处,扯远了。
正题是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>