uniapp父子组件之间传值

父组件

<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>

posted @ 2020-12-24 17:40  山城代码君  阅读(1465)  评论(0编辑  收藏  举报