前言
Vue组件化:把一个网页分割成不同区域,每个区域都可看做一个组件。
组件是Vue最常用的功能。
每个组件包含:功能(js代码)、内容(模板代码)、样式(css代码,需要构建工具支撑)。
组件属性也可以被提取到Vue实例中,因此可以通过{{属性名}}直接使用
开发一个组件需要三步:
1、创建组件
2、注册组件(全局注册、局部注册)
3、应用组件
必备知识
使用Vue组件,首先明白箭头函数,理解ES6模块化。
创建组件
创建一个最最简单的组件:
创建一个包含数据的组件:
通过上面案例可以看出:
在Vue中创建组件,就是创建一个配置对象,该配置对象和Vue实例的配置几乎一样
组件配置对象:
组件配置和Vue实例配置的区别:
1、组件没有el
2、组件的data不是对象而是函数,该函数返回对象作为数据
3、组件虚拟DOM树必须定义在template或render中
注册组件
注册组件分为全局注册和局部注册
全局注册:全局注册的组件,整个应用中任何地方都可以使用(包括Vue实例中,其它组件中)
全局注册方法:
局部注册:在Vue实例中,使用components注册,使用速写属性
比如定义一个组件Title,在Vue配置中局部注册:
组件之间可以相互使用,没有注册的组件不能使用
大部分场景不建议使用全局注册,因为使用构建工具时,可能会导致工具无法优化打包,影响打包结果,一般情况是组件在哪里用,就在哪里注册
官方推荐的两种组件命名法:
1、大驼峰命名法,比如:MyTitle
2、短横线命名法,比如:my-title
用大驼峰命名后,使用组件时既可以使用驼峰式,也可使用短横线式,比较灵活
应用组件:
把注册的组件当成一个元素来用,有两种写法,“<组件名/>”和“<组件名></组件名>”
比如使用大驼峰命名法注册了一个全局组件:
使用方法:
注意,使用多个组件时,组件外必须被标签包裹,比如:
向组件传递数据:
向组件传入数据的方式有很多种,最常用的是组件属性props,在属性props的数组里可以写需要的参数,类似于函数的参数
在Vue中,实例或组件的data配置变量,但data()是组件内部的,不推荐修改,所以不能用data接收数据
首先在组件里申明需要接收哪些属性
使用组件时,向其传递属性
如上所示,三种传参方式:
1、直接传字符串,比如title="雇员管理系统"
2、使用v-bind绑定变量,比如:page="page"
3、使用v-bind固定参数类型,比如:pagesize="10",传入数字10,类型为int
需要注意的是,props有两种格式,一种是数组,其中只写参数名即可,如上所示,另一种是对象格式,如:
既然有对象格式,说明它可以做一些配置,比如:
在组件中,属性只读,不可在组件中更改属性,这叫做单项数据流(即:组件中定义的属性,组件自己不可以修改)
上一篇:Vue使用.$mount()挂载