前端技术分享
0%

【014】Vue全局API学习：Vue.extend

发表于 更新于 分类于

用法

  1. 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
  2. data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			var Profile = Vue.extend({
				template: `<p>My name is {{ name }}, I am {{ age }}<p>`,
				data() {
					return {
						name: 'zhangsan',
						age: 18
					}
				}
			});
			new Profile().$mount('#app');
		</script>
	</body>
</html>

打开浏览器运行代码，可以看到页面显示内容为：My name is zhangsan, I am 18.

更进一步

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
	</head>
	<body>
		<div id="app">
			<profile></profile>
		</div>
		<script type="text/javascript">
			var Profile = Vue.extend({
				template: `<p>My name is {{ name }}, I am {{ age }}.<p>`,
				data() {
					return {
						name: 'zhangsan',
						age: 18
					}
				}
			});
			// 看这里
			Vue.component('profile', Profile)
			new Vue({ el: '#app' });
		</script>
	</body>
</html>

打开浏览器运行代码，可以看到页面显示内容同样为：My name is zhangsan, I am 18.

总结

通过上面第一节和第二节的示例代码，我们发现Vue.extend和Vue.component好像有一点关系。现在我们将Vue基础学习中的基础组件代码拿一部分出来比较一下。

先看一下vue.component的用法：

1
2
3
4
5
6
7
8
9
10
11
12
// 自定义组件
Vue.component('v-btn', {
	template: `<p>My name is {{ name }}, I am {{ age }}<p>`,
	data() {
		return {
			name: 'zhangsan',
			age: 18
		}
	}
})
// 实例化
new Vue({ el: '#app' });

在看一下vue.extend的用法：

1
2
3
4
5
6
7
8
9
10
var Profile = Vue.extend({
	template: `<p>My name is {{ name }}, I am {{ age }}<p>`,
	data() {
		return {
			name: 'zhangsan',
			age: 18
		}
	}
});
new Profile().$mount('#app');

比较后我们发现，vue.extend不需要实例化，只需要通过$mount挂载到自定义的元素上即可。

再结合第二节的示例代码，我们可以得出：

  • vue.extend创建的是一个组件构造器，不是直接挂载在vue的示例对象。简单理解就是vue.extend构造了一个和vue组件内部有一样结构的对象，并且还需要通过Vue.components注册才可以使用的。