組件建立、組件註冊方式

1、建立組件

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、組件註冊

2.一、全局組件註冊

在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.二、局部組件註冊

直接在須要使用組件的頁面進行註冊組件，如在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>

 轉載時請註明出處及相應連接，本文永久地址：http://www.javashuo.com/article/p-aneyvndx-kk.html，謝謝！