zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    个人作业——软件评测
    结对第二次作业
    寒假作业(2/2)
    寒假作业(1/2)
    markdown整理
    我们一定会在人生的更高处相见的
    时间复杂度 分析 可能算法
    有关数学 结论 规律 题目 小结
    jzyz 题库 选做 及 知识小结
    隔板法
  • 原文地址:https://www.cnblogs.com/color123456/p/14185353.html
Copyright © 2011-2022 走看看