【Vue.js 入门与实战】--组件-创建组件的方式1

组件-创建组件的方式1

内容介绍：

一、使用Vue.extend来创建全局的Vue组件

二、使用Vue.component ('组件的名称'，创建出来的组件模板对象)

三、总结

如果要使用组件，直接把组件的名称以HTML标签的形式引入到页面中即可。

一、使用Vue.extend来创建全局的Vue组件：

var com1=Vue.extend({

 template: ' <h3>

这是使用Vue.extend创建的组件<h3>'

//通过template属性，指定了组件要展示的HTML结构

二、使用Vue.component ('组件的名称'，创建出来的组件模板对象)

Vue.component ( ' myCom1',com1)

此时刷新，得到执行结果：

//如果要使用组件，直接，把组件额名称，以 HTML 标签的形式，引入到网页中，即可

我们要把模板对象注册为一个真正具有名称的一个组件，可以引用这种组件，可以利用条件形式。

三、总结

这就是创建组件的第一种方式，通过vue.extend来创建组件，这个流程分为两步：

1.  第一步：

直接调用vue.extend里面的配置对象，此时component就是组建展示的具体内容，这是 vue.extend 会返回一个组件的模板对象，然后再调用 Vue.component，此时会把模板对象注册为一个真正具有名称的组件，之后在页面中可以直接引用这个名称。

2.  第二步：

如果使用Vue.component定义全局组件的时候，组建名称使用了驼峰，命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-链接；

如果不使用驼峰，则直接拿名称来使用即可。

以上就是我们创建组件的第一种方式。