Vue組件化開發

目錄

• Vue組件化開發
  • 組件化開發：
  • Vue實例方法與屬性
  • Vue.extend與Vue.Component
  • 全局指定、組件、方法
  • 實例：Popup插件的封裝

Vue組件化開發

組件化開發：

一、組件化開發指的是將複雜的業務拆分爲一個有一個的組件
二、組件化開發的組件通常來講要靈活
三、組件化開發涉及到了Vue的js組件封裝，須要掌握Vue基礎、Vue實例方法與屬性、Vue.extend、Vue插件等知識

Vue實例方法與屬性

vm.$mount(el)
會將當前的組件掛載el元素上，該操做會替換當前的元素
若$mount中接收的el爲空，則會掛載到當前的vue實例之外的地方
當vm對象中存在el時，會掛載到el上

vm.$el
返回當前掛載的元素

Vue.extend與Vue.Component

一、Vue.Component

定義了一個在Vue的掛載點下的一個全局組件

二、Vue.extend

定義了一個未掛載的組件類

能夠接收一個組件做爲當前組件類的模板

使用關鍵字new實例組件，能夠接收參數，這個組件須要手動掛載

三、插件

Vue.use(Plugin, options)

Plugin：若爲對象時，會查找並執行對象下的install方法，若爲函數，會直接執行

options：傳遞到insntall函數中的參數

install函數的第一個參數是Vue，第二個參數爲options

全局指定、組件、方法

import MyPlugin from ""
MyPlugin.install=(Vue, options)=>{

    // 添加全局組件
    Vue.component(MyPlugin.name, MyPlugin)

    // 掛載原型方法
    var Plugin = Vue.extend(MyPlugin)
    Vue.prototype.doPlugin = function(){
        var plugin = new Plugin({})
        document.body.appendChild(plugin.$mount().$el)
    }

    // 添加全局方法或屬性
    Vue.myGlobalMethod = function () { 
        // code
    }

    Vue.myGlobalProperty = 'property'

    // 添加全局資源 
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) { 
            // code
        }
        // code
    })

    // 注入組件選項 
    Vue.mixin({
        created: function () { 
            // code
        } ... 
    })
}
export default MyPlugin

實例：Popup插件的封裝

編寫：
src/components/Popup/Popup.vue

<template>
<div class='popup-container' v-if="status">
<div class="popup-content">
<div class="popup-title">{{title}}</div>
<div class="popup-msg">{{msg}}</div>
<a class="popup-btn" href="javascript: void(0)" @click="hidePopup">x</a>
</div>
</div>
</template>
<script>
export default {
    name: 'popup'
}
</script>
<style lang="scss">
    div.popup-container{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(33, 33, 33, .5);
        box-sizing: content-box;
        div.popup-content{
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -150px -300px;
        background: #fff;
        width: 600px;
        height: 300px;
    }
    div.popup-title{
        width: 590px;
        height: 20px;
        padding: 5px;
        line-height: 20px;
        text-align: center;
        background: #3498db;
    }
    div.popup-msg{
        width: 588px;
        height: 239px;
        text-align: center;
        border: 1px solid #999;
        border-top: none;
        padding: 15px 5px;
    }
    a.popup-btn{
        position: absolute;
        top: 5px;
        right: 5px;
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        color: #666;
        background: #f00;
    }
}
</style>

src/components/Popup/index.js

import Popup from './Popup.vue'
const defaultData = {
    status: false,
    title: 'Popup',
    msg: 'Message'
}
Popup.install = (Vue) => {
    let PopupCom = Vue.extend(Popup)
    console.log('PopupCom', PopupCom)
    Vue.prototype.$popup = function(params) {
        let popup = new PopupCom({
            el: document.createElement('div'),
            data() {
                for(let item in params){
                    defaultData[item] = params[item]
                }
                return defaultData
            },
            methods: {
                hidePopup() {
                    this.status = false;
                },
            },
        })
        console.log('popup', popup);
        console.log('popup.$mount()', popup.$mount());
        document.body.appendChild(popup.$mount().$el)
    }
}
export default Popup

使用：
src/main.js

import Vue from 'vue'
import App from './App.vue'

//引用並使用插件
import Popup from './components/Popup'
Vue.use(Popup)

new Vue({
    render: h => h(App),
}).$mount('#app')

src/main.js

<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<button @click="doit">do</button>
</div>
</template>
<script>
export default {
    name: 'app',
    methods: {
        //調用方法進行彈窗
        doit() {
            this.$popup({
                status: true
            })
        }
    },
}
</script>
<style lang="scss">
#app {
    text-align: center;
}
</style>