Vue组件封装及调用思路

封装一个message组件

<template>
    <transition name="move" appear>
        <div class="b-message" v-if="visiable">
            {{ message }}
        </div>
    </transition>
</template>
<script>
export default {
    name: "MyMessage",
    props: {
        message: {
            type: String,
            default: "你好呀",
        },
        visiable: {
            type: Boolean,
            default: false,
        },
        druation: {
            type: Number,
            default: 3000,
        },
    },
    mounted() {
        this.autoClose();
    },
    watch: {
        visiable(val) {
            val && this.autoClose();
        },
    },
    methods: {
        autoClose() {
            if (this.druation !== 0) {
                setTimeout(() => {
                    this.close();
                }, this.druation + 800);
            }
        },
        close() {
            this.$emit("update:visiable", false);
        },
    },
};
</script>
<style lang='less'>
.b-message {
    position: fixed;
    top: 15px;
    left: 0;
    right: 0;
    width: 30%;
    height: 40px;
    line-height: 40px;
    padding: 5px 10px;
    margin: auto;
    background-color: skyblue;
    color: #fff;

    // enter
    &.move-enter,
    &move-leave-to {
        opacity: 0;
        transform: translateY(-20px);
    }

    &.move-enter-active,
    &move-leave-active {
        transition: 0.8s linear;
    }
}
</style>

方式1：通过组件调用

<template>
    <div id="app">
        <MyMessage
            massage="组件封装"
            :visiable.aync="isShow"
            :druation="0"
        />
        <button v-on:click="isShow = true">打开</button>
        <button v-on:click="isShow = false">关闭</button>
    </div>
</template>

<script>
import MyMessage from "./components/MyMessage.vue";

export default {
    name: "App",
    components: {
        MyMessage,
    },
    data() {
        return {
            isShow: false,
        };
    },
};
</script>

方式2：通过函数调用

1. 创建挂载执行js
   massage.js

import Vue from 'vue';
import MyMessage from './MyMessage.vue';
const createMessage = propsData => {
    // 1.生成组件构造器
    const myMsg = Vue.extend(MyMessage);
    // 2.创建组件实例，挂载到vue中
    let instance = new myMsg({ propsData }).$mount();
    // 3.插入dom中
    document.body.appendChild(instance.$el);
    
    // 自动关闭逻辑
    instance.$on('update:visiable', value => (instance.visiable = value));
    
    // 返回改实例，方便其他操作
    return instance;
};

// 4.挂載在vue实例中
Vue.prototype.$message = createMessage;

2. main.js 导入

import './components/message.js';

3. 使用

onOpen() {
   this.msgPopup = this.$message({
                message: "我是通过函数式调用的",
                visiable: true,
            });
},
onClose() {
    this.msgPopup.close();
}

方式3：通过插件调用

与方式2差不多，区别在与安装方式\

1. 不在message.js挂载

import Vue from 'vue';
import MyMessage from './MyMessage.vue';
const createMessage = propsData => {
    // 1.生成组件构造器
    const myMsg = Vue.extend(MyMessage);
    // 2.创建组件实例，挂载到vue中
    let instance = new myMsg({ propsData }).$mount();
    // 3.插入dom中
    document.body.appendChild(instance.$el);
    
    // 自动关闭逻辑
    instance.$on('update:visiable', value => (instance.visiable = value));
    
    // 返回改实例，方便其他操作
    return instance;
};

export {createMessage}

2. 封装插件安装方式
   创建文件plugins/index.js

import { createMessage } from '../components/message';
import MyMessage from '../components/MyMessage.vue';

export default {
    install(Vue) {
        Vue.component(MyMessage.name, MyMessage);
        Vue.prototype.$message = createMessage;
    },
};

main.js导入

import MyMessage from './plugins/index';
Vue.use(MyMessage);

3. 使用

onOpen() {
   this.msgPopup = this.$message({
                message: "我是通过函数式调用的",
                visiable: true,
            });
},
onClose() {
    this.msgPopup.close();
}