父组件
<template>
<view class="parent-comm">
<itemcomm :msg="list"></itemcomm> //子组件 :msg="list" 这个是传值给子组件,msg字段可自己取名,但子组件上必须和父组件上的统一。
</view>
</template>
<script>
import itemcomm from ‘./test0301.vue‘ //子组件
export default {
data() {
return {
list: {
"a": 100,
"b": 200,
"c": 300
}
}
},
components: {
itemcomm //子组件
},
methods: {
}
}
</script>
<style>
</style>
子组件
<template>
<view class="node-comm">
<text>{{msg.a}}</text>//显示父组件传过来的值
<text>{{msg.b}}</text>//显示父组件传过来的值
<text>{{msg.c}}</text>//显示父组件传过来的值
</view>
</template>
<script>
export default{
props:{
msg:{ //接收父组件传过来的值
type:Object,
default:{}
}
}
}
</script>
<style>
</style>