<comment>
    # 组件注释
</comment>
<template>
    <div class="itemImage grid-content bg-purple">
      <img :src="itemData.image" class="itemimg">
    </div>
</template>

<script>
    //import logo from '../../../static/logo.png'
    export default {
        name: 'itemImage',
        components: {
            //Xgplayer :  () => import('../xgplayer'),
        },
        data() {
            return {
              images : [
                {image : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566960256&di=c11de22a5cb4dd6802bdaca4a2547c93&imgtype=jpg&er=1&src=http%3A%2F%2Fhbimg.huabanimg.com%2F6d70037536a6bf74b5a7a22b76a8baba0d45a1ca5d9f-6g8zWG_fw236"},
              ],
              itemData : {
                image : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566960256&di=c11de22a5cb4dd6802bdaca4a2547c93&imgtype=jpg&er=1&src=http%3A%2F%2Fhbimg.huabanimg.com%2F6d70037536a6bf74b5a7a22b76a8baba0d45a1ca5d9f-6g8zWG_fw236"
              },
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          setData(data){
            console.log("设置了吗",data);
            this.itemData = data;
          }
        },
        //计算方法
        computed: {},
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>
  .itemimg{
    width: 100%;
    height: 100%;

  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
       border-radius: 4px;
       height: 10rem;
       align-items: center;
       display: flex;
     }
</style>
