例子一
假设有一个组件
<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"
},
<