MVVM開發總結——vue組件（你所須要知道的）

時間 2021-02-16

標籤 javascript html vue java vuex app 模塊化 this code 模塊化開發欄目 JavaScript 简体版

原文原文鏈接

隨着模塊化開發的理念愈來愈被開發者所重視，如何快速高效的開發項目成爲了開發中所要注意的重點。在vue.js中組件系統做爲一個重要的概念，它提供的組件能夠獨立、重複的使用來構建大型的應用。組件能夠擴展HTML元素，封裝可重用的HTML代碼，咱們能夠將組件看做自定義的HTML元素。javascript

組件的使用步驟：

1.使用 Vue.extend()建立組件構造器
2.使用 Vue.componnet()註冊組件
3.在 Vue的實例做用域範圍內使用組件html

vue組件——最簡單的demo實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-組件</title>
    <script type="text/javascript" src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    
    <script>
        // 建立組件構造器
        var myComponent = Vue.extend({
            template: '<div>this is a component!</div>'
        });
        // 全局註冊組件
        Vue.component('my-component', myComponent)
        
        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

這個例子是咱們常見的一個組件使用，這是vue1.x中的組件的寫法，vue2.x提出了更加語義化的寫法，但要注意vue.extend()的使用，這裏不作贅述，詳情看下文。
提醒：這裏須要注意，組件註冊須要在Vue實例以前，這裏和自定指令須要注意的事項一致。vue

組件的全局註冊和局部註冊

組件和指令同樣均可以分爲全局的和局部的。
上面的示例就是一個全局的組件，在開發中咱們可能更多的須要的不是全局組件，而是局部組件。組件包含在其餘組件內的狀況出現的概率比較大，這時咱們能夠用選項的components對象屬性實現局部註冊組件。java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-組件</title>
    <script type="text/javascript" src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <my-component1></my-component1>
        <my-component2></my-component2>
    </div>
    
    <script>
        var myComponent1 = Vue.extend({
            template: '<div>this is a component1!</div>'
        });

        var myComponent2 = Vue.extend({
            template: '<div>this is a component2!</div>'
        });

        var vm = new Vue({
            el: '#app',
            components: {
                'myComponent1': myComponent1,
                'myComponent2': myComponent2
            }
        })
    </script>
</body>
</html>

這種局部註冊組件的方式使咱們經常使用的形式之一。vuex

咱們也常常見到這樣的組件使用方式，以下圖示例：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-組件</title>
    <script type="text/javascript" src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <div v-text="parentMsg"></div>
        <!-- 組件1 -->
        <my-component1></my-component1>
        <!-- 組件2 -->
        <my-component2></my-component2>
        <!-- 組件3 -->
        <div id="component"></div>
        <!-- 掛載組件 -->
        <div id="globalComponent"></div>
    </div>
    
    <script>
        var myComponent1 = {
            template: '<div v-text="child-msg"></div>',
            props: ['childMsg'],
            data: function(){
                return {
                    msg: 'this is a component1!'
                }
            }
        };

        var myComponent2 = {
            template: '<div v-text="msg"></div>',
            data: function(){
                return {
                    msg: 'this is a component2!'
                }
            }
        };

        var myComponent3 = {
            template: '<div v-text="msg"></div>',
            data: function(){
                return {
                    msg: 'this is a component3!'
                }
            }
        };

        // 全局組件
        var myGlobalComponent = Vue.component('my-component1', myComponent1);

        // 擴展實例的構造器組件
        var myCmopnentExtend = Vue.extend(myComponent3);

        // 實例化的構造器組件能夠自由的綁定在任意元素按上
        var vc = new myCmopnentExtend().$mount('#component');

        // 建立vm 實例，使用局部組件
        var vm = new Vue({
            el: '#app',
            data: {
                parentMsg: 'haha'
            },
            components: {
                'myComponent2': myComponent2
            }
        });
        
        // 掛載組件
        var vb = new myGlobalComponent().$mount('#globalComponent');
    </script>
</body>
</html>

這種使用方法vue.js官網提供的方法，vue2.x在中推薦使用的，前者是在vue1.0中推薦的。
可是在這裏咱們須要注意的是，vue.extend()這種建立構造器和vue.component()全局註冊組件，能夠經過$mount('xxx')綁定到任意指定的元素（在VUE2.0中這種function component，它不是vue的實例，只能進行視圖的渲染而不能進行邏輯操做）。模塊化

組件間的通訊

父子組件間的通訊用vue.js開發文檔中的介紹就是props down， events up；
非父子組件間的通訊，能夠使用一個空Vue實例，來做爲中央事件總線。this

<div id="app">code

<h2 v-text="sTitle"></h2>
    <mc-one :child-msg="parentMsg"></mc-one>
    <mc-two :child-msg="parentMsg" v-on:backmsg="strReverse"></mc-two>
    <div class="msg3" v-text="parentMsg"></div>
</div>

<script>
    var bus = new Vue();
    //     子組件1
    var childOne = {
        name: 'childOne',
        props: ['childMsg'],
        template: '<div v-text="childMsg" @click="commit" class="msg1"></div>',
        data: function(){
            return {
                msg: 'component1'
            }
        },
        methods:{
            commit: function(){
                bus.$emit('oneToTwo', {
                    msg: 'i am component1'
                });
            }
        },
        mounted(){
            bus.$on('twoToOne', (data) => {
                this.msg = data.msg
            })
        }
    };
    //     子組件2
    var childTwo = {
        name: 'childTwo',
        props: ['childMsg'],
        template: '<div v-text="msg" @click="btnClick" class="msg2"></div>',
        data: function(){
            return {
                msg: 'component2'
            }
        },
        mounted(){
            bus.$on('oneToTwo', (data) => {
                this.msg = data.msg;
            })
        },
        methods:{
            btnClick: function(){
                this.$emit('backmsg');
            }
        }
    };
    // 父組建
    var vm = new Vue({
        el: '#app',
        data: {
            sTitle:'組件間的通訊',
            parentMsg:'i am parent component'
        },
        components: {
            'mcOne': childOne,
            'mcTwo': childTwo
        },
        methods: {
            strReverse: function(){
                this.parentMsg = this.parentMsg.split('').reverse().join('');
            }
        }
    });
</script>

這個小demo包含了3部分父組件，子組件1，子組件2，父組件經過props向子組件1傳遞信息，子組件1經過空組件bus中央總線向子組件2傳遞信息，子組件2經過event 向父組件傳遞信息。模塊化開發

在開發中小型應用時這樣的狀態信息傳遞已經能夠知足大部分項目的要求，但對中大型項目來講，隨着狀態信息的增多，業務邏輯的複雜，就須要統一的狀態管理模式來保證應用中全部的組件的正確狀態。咱們就須要vuex來進行狀態信息的處理和傳遞了。

vuex本文不作論述。