Vue.js 学习笔记九：组件化开发之组件基本使用

目录

组件基本使用

---

组件基本使用

组件的使用分成三个步骤：

1. 创建组件构造器

2. 注册组件

3. 使用组件

我们来看看通过代码如何注册组件：

// `${}`这是 ES6 中新增的字符串方法，用返单号引起来的
let name = 'zhangsan'
let user =`${name}已经成年了.`

 

查看运行结果，和直接使用一个 div 看起来并没有什么区别。

Vue.extend()：调用 Vue.extend() 创建的是一个组件构造器。 通常在创建组件构造器时，传入 template 代表我们自定义组件的模板。该模板就是在使用到组件的地方，要显示的 HTML 代码。事实上，这种写法在 Vue2.x 的文档中几乎已经看不到了，它会直接使用下面我们会学习到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

Vue.component()：调用 Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件标签名称。所以需要传递两个参数：(注册组件的标签名,组件构造器）。组件必须挂载在某个 Vue 实例下，否则它不会生效。

你可以将组件进行任意次数的复用：