Component development:

1. Componentized development refers to the breaking down of a complex business into one component after another

2. Componentized components are generally flexible

3. Componentized development involves THE ENCAPSULATION of JS components of Vue, and it is necessary to master the knowledge of Vue foundation, Vue instance methods and attributes, Vue. Extend, Vue plug-ins and so on

Vue instance methods and properties

vm.$mount(el)

Mounts the current component to the EL element, which replaces the current element

If the EL received in $mount is empty, it will be mounted outside the current Vue instance

When a VM object has an EL, it is mounted to the EL

vm.$el

Returns the currently mounted element

Vue. The extend and Vue.Com ponent

1, Vue.Com ponent

Defines a global component under a Vue mount point

2, the Vue. The extend

Defines an unmounted component class

You can receive a component as a template for the current component class

An instance component that accepts parameters using the keyword new needs to be manually mounted

3, the plug-in

Vue.use(Plugin, options)

Plugin: If it is an object, the install method will be found and executed. If it is a function, the install method will be executed directly

Options: Arguments passed to the insntall function

The first argument to the install function is Vue and the second argument is options

Global specification, component, method

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

    // Add global components
    Vue.component(MyPlugin.name, MyPlugin)

    // Mount the prototype method
    var Plugin = Vue.extend(MyPlugin)
    Vue.prototype.doPlugin = function(){
        var plugin = new Plugin({})
        document.body.appendChild(plugin.$mount().$el)
    }

    // Add global methods or attributes
    Vue.myGlobalMethod = function () { 
        // code
    }

    Vue.myGlobalProperty = 'property'

    // Add global resources
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) { 
            // code
        }
        // code
    })

    // Inject component options
    Vue.mixin({
        created: function () { 
            // code}... })}export default MyPlugin
Copy the code

Example: Encapsulation of the Popup plug-in

Writing: the 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>
Copy the code

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
Copy the code

Use: SRC/main. Js

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

// Reference and use the plug-in
import Popup from './components/Popup'
Vue.use(Popup)

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

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; }Copy the code