标签：Category vue 插槽 App 65 text import align

Category.vue

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    <!-- slot插槽将app里的图片指定到这个位置,挖个坑等图片来跳 -->
  </div>
</template>

<script>
export default {
  name: "TheCategory",
  props: ["listData", "title"],
};
</script>

<style>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
  display: flex;
  flex-direction: column;
}
h3 {
  text-align: center;
  background-color: orange;
}
li {
  text-align: left;
}
</style>

App.vue

<template>
  <div id="app" class="align">
    <category title="美食">
      <img slot="header" src="./assets/logo.png" alt="" />
      <a slot="footer" href="https://www.baidu.com">更多美食</a>
    </category>
    <category title="游戏">
      <ul slot="header">
        <li v-for="g in games" :key="g">{{ g }}</li>
      </ul>
      <div slot="footer" class="align">
        <a href="https://www.baidu.com">单击游戏</a>
        <a href="https://www.baidu.com">网络游戏</a>
      </div>
    </category>
    <category title="电影">
      <video
        slot="header"
        src="./assets/big_buck_bunny.mp4"
        controls
        autoplay
      ></video>
      <a slot="footer" href="https://www.baidu.com">更多电影</a>
    </category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["英雄联盟", "QQ飞车", "穿越火线", "地下城与勇士"],
      films: [
        "《反贪风暴5》",
        "《唐人街探案》",
        "《西虹市首富》",
        "《大人物》",
      ],
    };
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
.align {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
  height: 120px;
}
img{
  width: auto;
  height: 100px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
// npm i vue-resource引入插件
import vueResource from 'vue-resource';
//使用插件
Vue.use(vueResource);
new Vue({
  render: h => h(App),
}).$mount('#app');

标签：Category,vue,插槽,App,65,text,import,align
来源： https://blog.csdn.net/weixin_45843676/article/details/123117536

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。