Vue父传子详细教程

本文父组件：shopping.vue

子组件：shoplist.vue

1.父组件引入子组件

1.1.引入组件

import shoplist from '../shoplist.vue'

1.2.注册组件

components: {
            shoplist
        }

1.3.使用组件

<shoplist></shoplist>

2.父组件定义数据

2.1.定义数组

    const shoplistarr = [{
            img: "../../static/index/gsdz.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }
        , {
            img: "../../static/img/活动1.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }, {
            img: "../../static/img/活动2.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }, {
            img: "../../static/img/我的2.png",
            shoplistname: "XDT190E托链轮总成（X-G）",
            newprice: "354",
            oldprice: "354"
        }
    ]

2.2.把数据放入data中

data() {
            return {
                shoplistarr
            }
        },

3.父组件传值

3.1.在父组件使用子组件的标签内使用v-bind绑定父组件定义的数据

3.2.：shoplistarr要和子组件props接收的名字一致

3.3.“shoplistarr”应为data中的数据

<shoplist  :shoplistarr="shoplistarr"></shoplist>

4.子组件接收数据

4.1.props接收指定数据

props: {
            shoplistarr: Array
        }

4.2.使用数据

直接在<template>里面使用{{shoplistarr}}就可

<view>
        <view class="shoplistxq1" v-for="item in shoplistarr">
            <img :src="item.img">
            <div class="shoplistname1">{{item.shoplistname}}</div>
            <div class="newprice1">
                ￥{{item.newprice}}
                <span class="oldprice1">￥{{item.oldprice}}
                </span>
            </div>
        </view>
    </view>