uni-app使用组件四步曲

1.新建组件

我们选择在pages/gifts下面创建

<template>
    <view>
        <image src="../../static/1.png"></image>
    </view>
</template>

<script>
    export default {
        name:'giftBox',
        data() {
            return 
            };
        },
        methods:{

        }
    }
</script>

<style lang="scss">

</style>

2.引用组件

我们示例在index.vue中引用

import giftBox from '@/pages/gifts/gift-box.vue'

3.注册组件

在index.vue的components中注册

<script>
    export default {
        name:'blackBox',
        data() {
            return {
                title:'我的显示标题'
            };
        },
        methods:{
        },
        components: {
            giftBox,
        },
    }
</script>

4.使用

<blackBox></blackBox>

注意在组件的标签内部默认添加的元素是不会显示的，要添加的话，需要在自定义组件中添加插槽