使用vue-cli构建工具构建vue项目时候组件的使用

Z时代
2024-01-10
分类：综合

vue

<template>
    <div class="contains">
        <!-- <div class="main">
            <swiper :options='swiperOption' :not-next-tick=''></swiper>
        </div> -->
        <slide >
            <div v-for="(item,index) in banner" :data='sliderarr' :key="item+index">
                <a>
                    <!-- <img class="clicks" :src='item.img_url' @load="loadImg" @click='goto_url()'> -->
                    <img class="clicks" :src='item.img_url'  @click='goto_url()'>
                </a>
            </div>
        </slide>
        <p class="news"><b>幸运栏</b><span>恭喜{{users}}在{{games}}中获得<em>{{count}}</em>个金币</span></p>
   </div>
  </template>
<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper'
import slide from '../oslider'
export default{
    components: {
        slide
    },
    data () {
        return {
            sliderarr:[],
            banner:[
                {
                    img_url: "",
                },
                {
                }
            ],
            users:'“千尺干头”',
            count:'8288',
            games:'猜球游戏'
        }
    },
    methods: {
        goto_url(){
       }
  }
}
</script>
<style lang="scss" scoped>
@import 'swiper/dist/css/swiper.css';
.contains{
    p{
        margin:0;
        padding:0;
        width:100%;
    }
}
 .news{
        b{
            // display: inline-block;
            padding:0.02rem;
            border-radius: 0.02rem;
            background-color: #64ce66;
            font-size: 0.12rem !important;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            color:#fff;
        }
        span{
            font-weight: bolder;
        }
        em{
            color:#c11f2e;
            font-style: normal;
        }
        background: #f6f6f6;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.14rem;
    }
</style>

一般情况下的APP首页会单独拿出来做为一个组件，首页里面的内容就需要考虑组件化开发；

再建立其他组件文件夹；

例如一个子组件需要渲染再index组件中；

子组件代码如上，这个里面只需要写组件内的代码不需要管其他；

然后再在根组件中导入。声明，使用；如下根组件代码

<template>
  <div class="home">
        <Heador/>
        <Slider/>
        <Plays/>
        <Hotgame/>
        <Footballguess/>
        <Basketballguess/>
        <Hotreward/>
  </div>
</template>
<script>
import Heador from "../components/index/heador.vue"
import Slider from "../components/index/Slider.vue"
import Plays from "../components/index/plays.vue"
import Hotgame from "../components/index/Hotgame"
import Footballguess from "../components/index/FootballGuess"
import Basketballguess from "../components/index/BasketballGuess"
import Hotreward from "../components/index/Hotreward"
export default {
  components: {
      Heador,
      Slider,
      Plays,
      Hotgame,
      Footballguess,
      Basketballguess,
      Hotreward
  },
  name:"home"
}
</script>
<style lang="scss">
</style>