父组件内容
<!-- 接受的组件名 --> <Balance :Balance="Balance"></Balance> <!-- :后面的是子组件接受的 =后面是下面的list --> <script> import Balance from "../components/Balance"; //引入子组件 export default { components: { Balance //声明子组件名字 }, data() { return { // 子组件内容 Balance: [ { icon: "gold-coin-o", text: "余额", color: "#FA8876" }, { icon: "edit", text: "我砍价", color: "#FA8876" }, { icon: "coupon-o", text: "我的礼券", color: "#EEB956" }, ] }; },子组件内容
<!-- 循环的时候给图片渲染颜色 --> <van-icon :name="ys.icon" class="icon" :style="{color:ys.color}" /> export default { props: { Balance: Array // Balances:父组件中的数组名 Balance：在父组件中是一个数组 所以Array } };