博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MVVM开发总结——vue组件(你所需要知道的)
阅读量:6068 次
发布时间:2019-06-20

本文共 1386 字,大约阅读时间需要 4 分钟。

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

组件的使用步骤:

1.使用 Vue.extend()创建组件构造器

2.使用 Vue.componnet()注册组件
3.在 Vue的实例作用域范围内使用组件

vue组件——最简单的demo实例

    
vue-组件

这个例子是我们常见的一个组件使用,这是vue1.x中的组件的写法,vue2.x提出了更加语义化的写法,但要注意vue.extend()的使用,这里不做赘述,详情看下文。

提醒:这里需要注意,组件注册需要在Vue实例之前,这里和自定指令需要注意的事项一致。

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

组件和指令一样都可以分为全局的和局部的。

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

    
vue-组件

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

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

    
vue-组件

这种使用方法vue.js官网提供的方法,vue2.x在中推荐使用的,前者是在vue1.0中推荐的。

但是在这里我们需要注意的是,vue.extend()这种创建构造器和vue.component()全局注册组件,可以通过$mount('xxx')绑定到任意指定的元素(在VUE2.0中这种function component,它不是vue的实例,只能进行视图的渲染而不能进行逻辑操作)。

组件间的通信

父子组件间的通信用vue.js开发文档中的介绍就是props down, events up;

非父子组件间的通信,可以使用一个空Vue实例,来作为中央事件总线。

<div id="app">

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

在开发中小型应用时这样的状态信息传递已经可以满足大部分项目的要求,但对中大型项目来说,随着状态信息的增多,业务逻辑的复杂,就需要统一的状态管理模式来保证应用中所有的组件的正确状态。我们就需要vuex来进行状态信息的处理和传递了。

vuex本文不做论述。

转载地址:http://axfgx.baihongyu.com/

你可能感兴趣的文章
Git 使用初体验
查看>>
Android Studio使用技巧系列教程(二)
查看>>
VMware ESXi客户端连接控制台时提示"VMRC控制台连接已断开...正在尝试重新连接"的解决方法...
查看>>
深度优先搜索之小z的房子与验证码识别
查看>>
ABP源码分析三十一:ABP.AutoMapper
查看>>
fragment和fragmentactivity解析
查看>>
MySql数据库字段排序规则不一致产生的一个问题
查看>>
python模块 mysql-python安装(在ubuntu系统下)
查看>>
深入理解JavaScript系列(结局篇)
查看>>
集锦.txt
查看>>
linux配置防火墙详细步骤(iptables命令使用方法)
查看>>
项目中导入导出两个关联的库
查看>>
linux命令之tail
查看>>
C#匹配中文字符串的4种正则表达式分享
查看>>
转:android git开源项目列表
查看>>
LINUX 中的 TCP/IP协议 参数详解
查看>>
String 与StringBuffer的区别与使用
查看>>
nginx-upload-module模块实现文件断点续传
查看>>
Android studio动态调试smali
查看>>
mount
查看>>