创建全局组件的三种方式
程序员文章站
2023-04-04 19:50:45
什么是组件？ 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件就可以了。 组件化和模块化的区别 模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个模块功能的职能单一。例如：NodeJS 组件化： ......
什么是组件？
组件的出现，就是为了拆分vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件就可以了。
组件化和模块化的区别
- 模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个模块功能的职能单一。例如：nodejs
- 组件化：是从ui界面的角度进行划分的，前端的组件化，方便ui组件的重用
方式一
使用 vue.extend 配合 vue.component 来进行创建全局组件
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以 html 标签的形式，引入到页面中 -->
<mycom1></mycom1>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
// 1.1 使用 vue.extend 来创建全局的 vue 组件
const com1 = vue.extend({
template: '<h3>这是使用 vue.extent 创建的组件</h3>'// 通过 template 属性，指定组件要展示的 html 结构
});
// 1.2 使用 vue.component('组件的名称', 创建出来的组件模板对象)
// vue.component('mycom1', com1);
// 如果使用 vue.component 定义全局组件的时候，组件名使用了 驼峰命名，则
// 在引用的时候，需要把大写字符改为小写字符，同时，两个单词连接使用 -
vue.component('mycom1', com1);
const vm = new vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
当然，方式一也可以直接将第一步骤省略，直接：
vue.component('mycom1', vue.extend({
template: '<h3>这是使用 vue.extend 创建的组件</h3>'
}));
方式二
直接使用 vue.component 创建组件（其实就是在方式一的基础上更加省略而已）
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
<div id="app">
<mycom2></mycom2>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
/**
* 2. 直接使用 vue.component 创建组件
* @param1 {string} 组件的名称
* @param2 {object} 组件模板对象
*/
vue.component('mycom2', {
// 注意：无论是哪种方式创建出来的组件，组件的模板中必须有且只有一个唯一的根元素
template: '<div><h1>这是直接用 vue.component 创建的组件</h1><span>123</span></div>'
});
const vm = new vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
方式三
在 方式二的基础上将第二个参数中的html代码结构，替换为一个 id：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在被控制的 #app 外面，使用 template 元素定义组件的模板结构 -->
<template id="tmpl">
<div>
<h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
<h3>不错，好用</h3>
</div>
</template>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
vue.component('mycom3', {
template: '#tmpl'
});
const vm = new vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
下一篇： 面向对象之：类的成员