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>

  • 相关阅读:
    链接
    Oracle创建表空间
    C#中的全局异常捕捉
    软件架构入门
    Nginx安装及配置详解包括windows环境
    极路由4增强版(B70)HC5962离线ROOT通过Breed刷openwrt教程
    vue自定义全局指令v-emoji限制input输入表情和特殊字符
    【vue】@input
    【window】常用软件
    Vbox 虚拟机全屏
  • 原文地址:https://www.cnblogs.com/color123456/p/14185353.html
Copyright © 2011-2022 走看看