uni-app 父组件的参数如何传给子组件

• 2019 年 10 月 29 日
• 筆記

uni-app 如何在组件和组件之间，页面和组件之间相互传值 父组件向子组件传值 通过props来实现，子组件通过props来接收父组件传过来的值！ 父组件中： 第一步:引入子组件；

import device from './components/device.vue'  import battery from './components/battery.vue'

在components中对子组件进行注册

components: {              device,              battery  },

以标签的形式载入；通过数据绑定的形式进行传值

<device ref="device" :id="business-id" v-show="active == 'device'">  </device>  <battery ref="battery" :id="business-id" v-show="active == 'battery'">  </battery>

父组件index.vue

<template>      <view class="content">          <son-show :reUserInfo="userInfo"></son-show>      </view>  </template>    <script>      import sonShow from '../../component/son.vue';      export default {          components: {              sonShow          },          data() {              return {                  userInfo: [{                          "userName": "",                          "age": ""                      },                      {                          "userName": "",                          "age": ""                      }                  ]              }          }      }  </script>

<template>      <view class="">          <block  v-for="(item,index) in reciveUserInfo" :key="index">              <view class="mesg">                  <text>{{item.userName}}</text>                  <text>{{item.age}}</text>              </view>          </block>      </view>  </template>    <script>      export default{          props:["reciveUserInfo"],      }  </script>

子组件向父组件传值 父组件index.vue