vue组件之通过 props 给子组件传数组数据

上机训练——移动端标题栏

需求说明

• 完成移动端标题子组件，在子组件中接收标题和两张修饰图片；
• 在父组件中调用子组件，并传递给子组件对应的内容；
• 图片以import的方式进行导入，页面效果如图所示。

图片素材：

 

  

 

实现过程：

父组件示例代码（App.vue)：

<template>
  <div id="app">
    <TitleItem :list="listdata"></TitleItem>
  </div>
</template>

<script>
import TitleItem from '@/components/TitleItem'
import imgUrl1_path from './assets/search.png'
import imgUrl2_path from '@/assets/message.png'
import imgUrl3_path from '@/assets/fd.png'

export default {
  name: 'App',
  data(){
    return{
      listdata:[
        {
          title:'书影音',
          imgUrl1:imgUrl1_path,
          imgUrl2:imgUrl2_path
        },
        {
          title:'广播',
          imgUrl1:imgUrl3_path,
          imgUrl2:imgUrl1_path
        },
        {
          title:'小组',
          imgUrl1:imgUrl2_path,
          imgUrl2:imgUrl3_path
        }
      ]

    }
  },
  components:{TitleItem} 
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件接收父组件传递过来的数组数据，子组件列表项目代码（TitleItem.vue）: 

<template>
  <div class="box">
    <dl v-for="(item,index) in list" :key="index">	
		<dt><a href="#">{{item.title}}</a></dt>
		<dd><img :src=item.imgUrl1 />&nbsp;&nbsp;&nbsp;<img :src=item.imgUrl2 /></dd>
	</dl>
  </div>
</template>

<script>
export default {
    name:'TitleItem',
    data(){
        return{
        }
    },
    props:["list"]

}
</script>

<style scoped>
*{
			margin:0;
			padding: 0;
		}
		.box{
			margin:10px 0 0 10px;
		}
		dl{
			height: 45px;
			border-bottom: 2px solid gray;
			width: 90%;
			background: Gainsboro;
		}
		dt{
			padding-left: 300px;
			width: 500px;
			height: 45px;
			line-height: 50px;	
			float: left;	
		}
		dd{
			float: right;
			margin-top: 6px;
			margin-right: 15px;
		}
		img{
			width: 40px;
			height: 35px;
		}
		a{
			text-decoration: none;
		}
</style>

注意：父组件向子组件传递数组数据时需要用v-bind动态绑定props的值。