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

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

代码语言：javascript复制

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

在components中对子组件进行注册

代码语言：javascript复制

components: {
            device,
            battery
},

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

代码语言：javascript复制

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

父组件index.vue

代码语言：javascript复制

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

代码语言：javascript复制

<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

app components 数据

0 人点赞