父组件传图片地址给子组件

父组件

<template>
  <div class="about">
    <wall :urls="data"></wall>
  </div>
</template>
<script>
//接收子组件
import wall from '@/components/wall'
export default {
  data(){
    return {
    }
  },
  computed:{
    data(){
      var list = [];
      //因为我要传入8个图片，为了方便循环了一下，图片名称为1~8
      for(let i=0;i<8;i++){
        //必须用require包裹着图片地址，不然报错
        list[i]= require('@/assets/'+(i+1)+'.jpg')
      }
      return list
    }
  },
  components:{
    //注册组件
    wall
  }, 
}
</script>

 

子组件

<template>
    <div>
        <ul>
            <!-- 这里须用:key="(循环所设置的名称).td",才不会报错 -->
            <li v-for="item in urls" :key="item.td">
                <!-- 直接引入 -->
                <img :src="item" ></li>
         
        </ul>
    </div>
</template>

<script>
export default {
    //接收父组件的传值
    props: ['urls'],

};
</script>

<style scoped lang="less">
    *{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul{
        width: 100%;
        height: 150px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    li{
        width: 21%;
        padding: 5px 10px 5px 10px;
        margin-top: 20px;
        border: 1px solid gray;
    }
    img{
        width: 100%;
    }
</style>