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>复制代码

这个小demo包含了3部分父组件，子组件1，子组件2，父组件经过props向子组件1传递信息，子组件1经过空组件bus中央总线向子组件2传递信息，子组件2经过event 向父组件传递信息。ui

在开发中小型应用时这样的状态信息传递已经能够知足大部分项目的要求，但对中大型项目来讲，随着状态信息的增多，业务逻辑的复杂，就须要统一的状态管理模式来保证应用中全部的组件的正确状态。咱们就须要vuex来进行状态信息的处理和传递了。this

vuex本文不作论述。