文档章节

我们为什么要用Vue.js的组件化开发

 前端攻城老湿
发布于 11/09 21:32
字数 1457
阅读 13
收藏 2

那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子。这么说我相信很多人都理解了。

组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:

那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素。

使用组件的好处?

提高开发效率

方便重复使用

简化调试步骤

提升整个项目的可维护性

便于多人协同开发

如何注册组件?

需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。Vue.extend方法格式如下

var MyComponent = Vue.extend({
    // 选项...后面再介绍
})

如果想要其他地方使用这个创建的组件,还得个组件命个名:

Vue.component('my-component', MyComponent)

命名之后即可在HTML标签中使用这个组件名称,像使用DOM元素一样。下面来看看一个完整的组件注册和使用例子。

  
//html代码:
<div id="example">
    <my-component></my-component>
</div>
//js代码:
// 定义
var MyComponent = Vue.extend({
    template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
    el: '#example'
})

输出结果为:

<div id="example">
    <div>A custom component!</div>
</div

组件之间的通信 父组件要给子组件传递数据,

子组件需要将它内部发生的事情告诉父组件(利用事件的订阅发布模式)

1.给子组件的template上的元素绑定事件(如click),执行子组件的方法(如changeData),子组件的方法中发射一个事件(如s),传一个数据(如lalala);

2.父组件中,定义一个方法(如getData)用来拿到子组件的数据。

3.在自定义的组件上绑定子组件传过去的事件(s),执行事件(s)执行的是getData函数,getData函数中拿到数据(data,就是子组件传过去的lalala)数据同步

<div id="app">
<parent></parent>
</div>
<template id="parent">
<div>
    <h1>父组件 <mark>{{msg.name}}</mark></h1>
    <children :n="msg"></children>
</div>
</template>
<template id="children">
    <h2 @click="changeData">子组件 {{n.name}}</h2>
</template>
<script>
    //数据同步的核心:父组件给子组件传递“引用数据类型的数据”;
    var app=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#parent',
                data(){
                    return {msg:{name:'hahha'}}
                },
                components:{
                    children:{
                        props:['n'],
                        template:'#children',
                        methods:{
                            changeData(){
                                this.n.name='lallala'
                            },
                        }
                    }

                }
            }
        }
    })
</script>//

数据不同步(不直接使用父组件传的值,用data属性再自己的组件内做一个中间变量,防止报错)

<parent></parent>
</div>
<template id="parent">
<div>
    <h1>父组件 <mark>{{msg}}</mark></h1>
    <children :n="msg"></children>
</div>
</template>
<script>
    //数据不同步的核心:中间变量接收避免报错;
    var app=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#parent',
                data(){
                    return {msg:'hahha'}
                },
                components:{
                    children:{
                        props:['n'],
                        template:'<h2 @click="changeData">子组件 {{b}}</h2>',
                        data(){
                            return {b:this.n}
                        },
                        methods:{
                            changeData(){
                                this.b='lallala'
                            },
                        }
                    }
                }
            }
        }
    })
</script>

组件中的data必须是函数

每个组件都是互相独立的,如果它们共用一个对象,

在更改一个组件数据的时候,会影响其它组件,如果是函数的话,

每个组件都有都是又自己独立的数据,互相不会影响。

受限制的元素

Vue在浏览器解析和标准化HTML后才能获取模板内容, 所以有些元素限制了能被它包裹的元素。

例如:ul中只能放li;select中只能放option

某些元素中放入了自定义元素,

不符合W3C标准,最终会解析错误。

关于DOM模板的解析

当使用 DOM 作为模版时 (例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素 <ul>,<ol>,<table>,<select> 限制了能被它包裹的元素,而一些像 <option> 这样的元素只能出现在某些其它元素内部。

在自定义组件中使用这些受限制的元素时会导致一些问题,例如:

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被认为是无效的内容,因此在渲染的时候会导致错误。这时应使用特殊的 is 属性:

<table>
  <tr is="my-row"></tr>
</table>

也就是说,标准HTML中,一些元素中只能放置特定的子元素,另一些元素只能存在于特定的父元素中。比如table中不能放置div,tr的父元素不能div等。所以,当使用自定义标签时,标签名还是那些标签的名字,但是可以在标签的is属性中填写自定义组件的名字。

应当注意,如果您使用来自以下来源之一的字符串模板,这些限制将不适用:

<script type="text/x-template"> JavaScript 内联模版字符串 .vue 组件 其中,前两个模板都不是Vue官方推荐的,所以一般情况下,只有单文件组件.vue可以忽略这种情况。 **结语** 感谢您的观看,如有不足之处,欢迎批评指正。

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 8
码字总数 10013
作品 0
西城
私信 提问
为什么选择MpVue进行小程序的开发

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程...

狗尾草的博客
08/01
0
0
mpvue 初体验之改写车标速查小程序

前文 说到我开发了一个简单的小程序叫做 车标速查(代码以及二维码详见 这里),本文简单讲讲如何将这个小程序转为 mpvue 开发(最终 成果 ) mpvue 官网的 文档 真的是非常简单,不,应该说...

韩子迟
08/02
0
0
使用 Mpvue 开发微信小程序的最佳实践

本文由 授权转发,转载需与GitChat联系。 原文链接 本文作者:美团点评 胡成全 前言 小程序面世一年多以来,给前端开发带来了巨大的影响,有移动应用的地方,就有小程序的踪迹。经过一年多的...

乌骑凤
05/17
0
0
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
07/25
0
0
Vue中你不知道但却很实用的黑科技

本文纯技术干货,首发于 掘金,转载请注明出处和作者。 最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧...

Aresn
10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

从源码入手,一文带你读懂Spring AOP面向切面编程

之前《零基础带你看Spring源码——IOC控制反转》详细讲了Spring容器的初始化和加载的原理,后面《你真的完全了解Java动态代理吗?看这篇就够了》介绍了下JDK的动态代理。 基于这两者的实现上...

公众号_Zack说码
10分钟前
1
0
maven 常用命令

mvn deploy -Dmaven.test.skip=true mvn source:jar deploy -Dmaven.test.skip=true mvn dependency:tree -Doutput=1.txt...

yzzzzzzzz
11分钟前
0
0
JavaScript之Promise对象

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。 Pr...

前端攻城老湿
12分钟前
1
0
mysql事务,select for update,及数据的一致性处理

在MySQL的InnoDB中,预设的Tansaction isolation level 为REPEATABLE READ(可重读) 在select 的读取锁主要分为两种方式 select .... lock in share mode select ..... for update   这两...

细节探索者
14分钟前
0
0
python 将txt文件转换成excel

emmm,作为一个小白,不会的东西真的太多了,这两天好头大啊!加油坚持吧! #file_affilication = open('Affiliations.txt','r')import xlwtimport os import sysdef txt_xls(...

BellaYu
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部