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

安装语言包依赖

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>