Vue 自定义组件及属性赋值

参考：组件化应用构建
最下面的代码自定义了一个这样的组件：

image.png
上面的三列由三个 SportsListItem 组件构成。

在

<script>
export default {
  name: "SportsListItem",
  props: ["sportModel"]
};
</script>

中，name: "SportsListItem" ** 声明了组件在外部使用的名称，props: [”sportModel”]**声明了可以在外部传入的属性；

在外部 vue 文件中使用的时候，要引入: import SportsListItem from "../sports/view/SportsListItem.vue”; 并且在** components:{SportsListItem,}**中声明。

<template>
    <div id="root">
        <div id="circle"></div>
        <div id="text_view_1">{{sportModel.step}}步</div>
        <div id="text_view_2">{{sportModel.distance}}米</div>
        <div id="text_view_3">{{sportModel.minute}}分钟</div>
        <div id="text_view_4">
            <div id="time_view">{{sportModel.time}}</div>
            <div id="type_view">{{sportModel.type}}</div>
        </div>
        <div class="temp"></div>
    </div>
</template>

<script>
export default {
  name: "SportsListItem",
  props: ["sportModel"]
};
</script>

<style scoped>
#root,
.temp {
  width: 90%;
  height: 50px;
  /* background: red; */
  margin-left: 5%;
}
#circle {
  background: #52ba9f;
  border-radius: 3px;
  width: 6px;
  height: 6px;
  float: left;
  margin: 22px 10px;
}
#text_view_1,
#text_view_2,
#text_view_3 {
  font-family: Anton-Regular;
  font-size: 24px;
  color: #343434;
  letter-spacing: 1px;
  text-align: left;
  line-height: 50px;
  width: 20%;
}

#text_view_1 {
  float: left;
  /* background: green; */
}
#text_view_2 {
  float: left;
}
#text_view_3 {
  float: left;
}
#text_view_4 {
  float: right;
  /* background: green; */
}
#time_view {
  line-height: 20px;
  font-family: PingFang-SC-Medium;
  font-size: 12px;
  color: #999999;
  letter-spacing: 0;
  text-align: right;
}

#type_view {
  line-height: 30px;
  font-family: PingFang-SC-Medium;
  font-size: 14px;
  color: #343434;
  letter-spacing: 0;
  text-align: right;
}
</style>