組件創建、組件注冊方式

一、創建組件

1.在存放組件的目錄下新建組件頁面文件li-activity.vue文件，

<template name="li-activity">
    <view class="li-group">
        <view class="act-img-left">
            <image :src="list.image" class="img" mode=""></image>
            <view class="share-num-icon" v-if="list.scan">
                <text class="sha-num">{{list.scan}}</text>
                <text class="has-num">{{list.share}}</text>
            </view>
        </view>
        <view class="act-content-right">
            <text class="title">{{list.title}}</text>
            <text class="subtitle">{{list.subtitle}}</text>
            <view class="bottom-content">
                <text class="type">免費</text>
                <view class="button">
                    <view class="example tap-button" @tap="goExample(list.cates,list.id)">查看詳情</view>
                    <view class="creat tap-button" @tap="goCreat(list.cates,list.id)">創建</view>
                </view>
            </view>
        </view>
    </view>
</template>

li-activity.vue 文件的組件相關配置：

<script>
    export default {
        name:'li-activity',
        props:{
            list:{
                type:Object,
                default:{}
            }
        },
        methods:{
            goExample:function(cate,id){
                uni.navigateTo({
                    url: '/pages/activity-detail/'+ cate +'/'+ cate +'?id='+id
                });
            },
            goCreat:function(cate,id){
                uni.navigateTo({
                    url:'/pages/activity-creat/'+ cate +'/'+ cate +'?id='+id
                })
            }
        }
        
    }
</script>

name為組件名稱；props為相關動態控制的參數，在使用該組件時傳遞過來；methods為組件內綁定的相關事件

二、組件注冊

2.1、全局組件注冊

在main.js中引入該組件文件：

import liActivity from './pages/components/li-activity/li-activity.vue'

組件全局注冊：

Vue.component('li-activity',liActivity);

然后便可以在其他文件中使用該組件，如在index.vue中使用組件：

<template>
    <view class="content">
        <li-activity v-for="(item,index) in actlist" :key="index" :list="item"></li-activity>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                cate:'',
                cid:'',
                page:'1',
                actlist:[]
            };
        },
        onLoad(e) {
            this.getList(1)
        },
        methods:{
            getList:function(page){}
        }
    }
</script>

<style>
.content{
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    box-sizing: border-box;
}
</style>

2.2、局部組件注冊

直接在需要使用組件的頁面進行注冊組件，如在index.vue中使用組件：

在index.vue中引入組件文件：

import liActivity from '../../components/li-activity/li-activity.vue'

並在該頁面進行組件注冊：

components:{
    'li-activity':liActivity
},

然后便可以在其他文件中使用該組件，局部注冊組件完整代碼如下：

<template>
    <view class="content">
        <li-activity v-for="(item,index) in actlist" :key="index" :list="item"></li-activity>
    </view>
</template>

<script>
    import liActivity from '../../components/li-activity/li-activity.vue'
    export default {
        data() {
            return {
                cate:'',
                cid:'',
                page:'1',
                actlist:[]
            };
        },
        components:{
            'li-activity':liActivity
        },
        onLoad(e) {
            this.getList(1)
        },
        methods:{
            getList:function(page){}
        }
    }
</script>

<style>
.content{
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
    box-sizing: border-box;
}
</style>

 轉載時請注明出處及相應鏈接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/10173965.html，謝謝！