移动端（2）--组件的使用

最新推荐文章于 2025-11-09 18:05:07 发布

原创最新推荐文章于 2025-11-09 18:05:07 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了安装语言包依赖，使用的是Less语言。还阐述了组件相关内容，包括私有组件（含父组件、子组件，子组件style属性有特定说明）和公共组件，公共组件用法与子组件类似，仅引入路径不同，且提到公共组件有渐隐渐显效果及使用注意事项。

安装语言包依赖

npm install less --save
npm install less-loader --save

我使用的是less语言

组件

私有组件

<template>
	<home-header></home-header>
</template>
<script>
import HomeHeader from './component/HomeHeader.vue'
    export default {
        name:'Home',
        components:{
        	HomeHeader
        },
        data(){
            return{
                        }
        }
    };
</script>
<style>
    
</style>

父组件

<template>
	<div>我是homeheader</div>
</template>
<script>
    export default {
        name:'HomeHeader',
        data(){
            return{
                        }
        }
    };
</script>
<style lang="less" scoped>
    
</style>

子组件 style 的lang属性说明用了less语言 scoped属性说明只对这个目录有效

公共组件

和子组件用法相同就是引入的时候修改路径即可

公共组件中的渐隐渐显的效果

FadeAnimation.vue

<template>
  <transition>
    <slot></slot>//这里是插槽，如果父组件使用该组件包裹其他组件就会代替这个插槽
  </transition>
</template>

<script>
export default {
  name: 'FadeAnimation'
}
</script>

<style lang="stylus" scoped>
  .v-enter, .v-leave-to
    opacity: 0
  .v-enter-active, .v-leave-active
    transition: opacity .5s
</style>

使用的时候（注意插槽slot）

<fade-animation>
    <gallety-item>
    </gallety-item>
</fade-animation>

//<gallety-item>--->>> <slot>