5.4 组件设计：游戏卡片Game

首先设计游戏卡片组件，也就是这一部分：
上一节已经复制出来的游戏部分，取其中一个游戏，作为组件的template部分：
<template>
    <div class="game_item" style="clear: both;">
        <div class="item_img" onclick="gameDetail('3768')">
            <img class="gameIcon" src="https://img.d.cn/cp_admin/icon/4484/be140cf3191820d73b15bd6e2119cc38.png">
        </div>
        <div class="item_content" onclick="gameDetail('3768')">
            <span class="game_channel">(当乐)</span>
            <span class="game_name">三国杀<span style="color: red">5.0</span>
            <span class="discount">折</span>
            </span>
            <span class="intro">应用描述：《三国杀》2020年十佳卡牌游戏《三国杀》</span>
        </div>
        <div class="item_download">
            <span class="dow">下载地址:</span>
            <img class="platformicon" onclick="download(this)" data-url="https://pkg.d.cn/7NN1DPaO" src="https://www.codessp.cn/wxImage/android.png">
        </div>
    </div>
</template>
script部分,Game组件有一个game属性，它的值是外部指定的，参见上一节
export default{
    name:"Game",
    props:{
        game:Object //外部传入的所有Game数据
    }
}
然后我们看看上一节GameFrame取出的游戏数据：
里面有些数据是不用展示的，把展示的信息用game的属性取代，例如游戏名字是{{game.name}}
要注意的是Game组件本身不需要取数据，它的数据由GameFrame给定，所以Game组件有一个属性game（props）（组件属性的设置见3.3组件的数据和属性