vue的组件插件化封装

vue组件插件化封装

一、场景

当我们封装好一个组件，这个组件很小，但是却是很多地方都要使用的公共组件，如一个弹出小框。这个时候我们在每个需要用到的大页面都去引入这个小框然后对他传入内容数据显得很繁琐。

例如：

toast.vue弹出框组件

<template>
<div class="toast" v-show="isShow">{
  
  {massage}}</div>
</template>

<script>
    export default {
        name: "Toast",
        props:{
            massage: {
                type: Srting,
                default: ''
            },
            isShow: {
                type: Boolean,
                default: false
            }
        }

    }
</script>

<style scoped>
    .toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 7px 10px;
        background-color: rgba(0,0,0,.8);
        border-radius: 4px;
        color: #fff;
        z-index: 9999;
    }
</style>

如果我们每个页面都要使用到它那么步骤就是

import 导入组件
components 注册组件
使用 toast标签
传入msg，传入isShow，且控制他要在1s后消失

明明只是个小组件，我们却要写得这么繁琐，这个时候我们就可以使用插件化的封装方式。

二、封装插件

1、使用

我们想要这样去使用它

this.$toast.show