props的动态传值以及 v-for列表渲染

最新推荐文章于 2023-06-05 12:24:43 发布

安柠儿_Anni

最新推荐文章于 2023-06-05 12:24:43 发布

阅读量852

点赞数

本文链接：https://blog.csdn.net/mszm520/article/details/104315528

版权

本文通过两个实例介绍如何在Vue中实现props的动态传值和v-for列表渲染。例子一展示了如何将父组件的data数组传给子组件，并使用v-for遍历渲染多个子组件。例子三探讨了另一个组件间的数据传递和渲染场景。

摘要由CSDN通过智能技术生成

文章目录

例子一
例子三

例子一

假设有一个组件

<template>
  <a href=""><img src="" />{
   {
     }}</a>
</template>
<script>
export default {
   
  name: "GameIcon",
  
};
</script>

他的父组件

<template>
  <ul>
    <li>
      <GameIcon ></GameIcon>
    </li>
  </ul>
</template>
<script>
import GameIcon from "@/components/GameIcon.vue";
export default {
   
  components: {
    GameIcon },
 </script>

现在父组件有data

data: function() {
   
    return {
   
      iconList: [
        {
   
          gameName: "欢乐斗地主",
          src:
            "http://imgwx1.2345.com/xiaoimg/api_images/sign_4399/75/18/35005_75.jpg",
          href: "http://xiaoyouxi.2345.com/flash/49011.htm"
        },
        {
   
          gameName: "新黄金矿工",
          src:
            "http://imgwx1.2345.com/xiaoimg/api_images/sign_4399/75/92/507290img_75x.jpg",
          href: "http://xiaoyouxi.2345.com/flash/507290.htm"
        },
        {
   
          gameName: "双人碰碰车3D",
          src:
            "http://imgwx1.2345.com/xiaoimg/api_images/sign_4399/75/88/498056img_75x.jpg",
          href: "http://xiaoyouxi.2345.com/flash/498056.htm"
        },
        {
   
          gameName: "欢乐斗地主",
          src:
            "http://imgwx1.2345.com/xiaoimg/api_images/sign_4399/75/18/35005_75.jpg",
          href: "http://xiaoyouxi.2345.com/flash/49011.htm"
        },
        <