Vue组件的使用

134 阅读1分钟

1.Vue中使用组件的三大步骤:

a.定义组件(创建组件)

b.注册组件

c.使用组件(写组件标签)

2.如何定义一个组件?

使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有区别,区别如下:

a.el不要写,为什么?----------->最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

b.data必须携程函数,为什么?------->避免组件被复用时,数据存在引用关系。

备注:使用template可以配置组件结构。

3.如何注册组件?

a.局部注册:靠new Vue的时候传入components选项。

b.全局注册:靠Vue.component('组件名',组件)

4.编写组件标签:

<student></student>

5.组件使用的几个注意点:

a.关于组件名:

一个单词组成:

第一种写法(首字母小写):student
第二种写法(首字母大写):Student

多个单词组成:

第一种写法(kebab-case命名):my-student
第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)

备注:

(1).组件名京可能回避HTML中已有的元素名称,列如:h2,H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

b.关于组件标签:

第一种写法:<student></student>
第二种写法:<student/>
备注:不用使用脚手架时,<student/>会导致后续组件不能渲染.

c.一个简写方式:

const student = Vue.extend(options) 可简写为:const student = options