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

時間 2019-11-24

標籤 mvvm 開發總結 vue 組件須要知道简体版

原文原文鏈接

隨着模塊化開發的理念愈來愈被開發者所重視，如何快速高效的開發項目成爲了開發中所要注意的重點。在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

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

<!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的實例，只能進行視圖的渲染而不能進行邏輯操做）。app

組件間的通訊

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

<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>複製代碼