vue 自定义组件全局配置及引用

image.png

badge文件夹下
badge.vue 页面

<template>
    <div id="badge" class="badge-class" v-on:click="tapClick">
        <div style="flex-direction: row;display:flex;align-items: center;justify-content: space-between;flex: 1;">
            <div style="flex-direction: row;display:flex;align-items: center;">
                <img v-if="left_image" :src="left_image" style="width: 24px;height: 24px;margin-left: 30px;">
                <label class="text-class black" :style="left_image? '':'margin-left:30px'">{{titleLabel}}</label>
            </div>

            <img v-if="rightImage" :src="rightImageUrl?rightImageUrl:require('../../assets/right.png')" class="rightImage-class" style="margin-right: 30px;">

        </div>

        <div style="height: 1px;background: #eeeeee;margin-left: 26px;"></div>
        <slot  v-bind:user_name="user_name"></slot>
    </div>
</template>

<script>
    export default {
        name: "badge",
        data() {
            return {
                title: '',
                user_name: {
                    name: '的说法范德萨'
                },


            }
        },
        props: {
            titleLabel: {
                type: String
            },
            left_image: {
                type: String
            },
            rightImage:{
                type:Boolean,
                default:true
            },
            rightImageUrl:{
                type:String
            },
            rightImageStyle:{
                type:String
            }
        },
        methods: {
            tapClick: function () {
                console.log('======')
                this.$emit('tapClick')
            },
            hello() {
                console.log('======3=4949')
            }
        },
        computed :{

            // titleLabel(newVal, oldVal){
            //     console.log(newVal,'=========titleLabel')
            // },



        }
    }
</script>

<style scoped>
    .badge-class {
        flex-direction: column;
        display: flex;
        justify-content: space-between;
        background: #ffffff;
        height: 55px;

    }

    .text-class {
        margin-left: 10px;
        font-size: 15px;

    }
    .rightImage-class{
        width: 7px;
        height: 10px;
    }
</style>

badge文件夹下
index.js

image.png

import badgeComponent from './badge.vue'
const badge = {
    install:function (Vue) {
        Vue.component('badge',badgeComponent)
    }
};
// 导出组件
export default badge

在main.js中引用

image.png

import badge from './components/badge/';
Vue.use(badge);

在页面中使用

<badge :titleLabel=item.name :left_image=item.image v-for="(item,index) in a" v-on:tapClick="clickTap(item)">
</badge>