MVVM 开发总结 —— Vue 组件（你所需要知道的）-低调大师

MVVM 开发总结 —— Vue 组件（你所需要知道的）

2018-07-16 476

随着模块化开发的理念越来越被开发者所重视，如何快速高效的开发项目成为了开发中所要注意的重点。在vue.js中组件系统作为一个重要的概念，它提供的组件可以独立、重复的使用来构建大型的应用。组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。

组件的使用步骤：

1.使用 Vue.extend()创建组件构造器
2.使用 Vue.componnet()注册组件
3.在 Vue的实例作用域范围内使用组件

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实例之前，这里和自定指令需要注意的事项一致。

组件的全局注册和局部注册

组件和指令一样都可以分为全局的和局部的。
上面的示例就是一个全局的组件，在开发中我们可能更多的需要的不是全局组件，而是局部组件。组件包含在其他组件内的情况出现的几率比较大，这时我们可以用选项的components对象属性实现局部注册组件。

<!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>

这种局部注册组件的方式使我们常用的形式之一。

我们也经常见到这样的组件使用方式，如下图示例：

<!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实例，来作为中央事件总线。

<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本文不做论述。

原文发布时间为：2017年08月29日
原文作者：掘金
本文来源：掘金如需转载请联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/613309

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

(码友推荐)2018-07-17 .NET及相关开发资讯速递

(码友推荐)2018-07-17 .NET及相关开发资讯速递： 1.IIS自动申请部署免费SSL证书服务2.C# 栈的应用 - 见风任然是风 - 博客园3.你所不知道的ASP.NET Core MVC基础系列（一）4.Creating a Throttle with ActionBlock5.Important Tips to Write Clean Code in C#6.vue 实践技巧合集7.Vue 组件学习 (2)：slot 内容分发，编译作用域，动态切换组件8.1-5. Vue.js核心知识之组件化9.The Best Explanation of JavaScript Reactivity10.Vant 1.1.13 发布，有赞轻量级移动端 Vue 组件库11.Vue源码阅读前必须知道javascript的基础内容12.掌握这7个原则，帮你快速提高产品的可访问性13.掌握这9个网页设计流行趋势，提案必过！14.2018年推出的10个JavaScript动画库15.Obtaining recursive data with sql serve

2018-07-17

621

import java.sql.Connection; import java.sql.Driver; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.Properties; public class TestConnection { public static void main(String[] args) throws InstantiationException, IllegalAccessException, ClassNotFoundException, SQLException { Driver driver = (Driver) Class.forName("com.cloudera.impala.jdbc41.Driver").newInstance(); Properties propertes = new Properties(); Connection connetction = driver ...

2018-07-17

609

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。