1.1 基本概念
组件化是Vue.js中的重要思想。
它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。
组件化思想的应用
- 有了组件化的思想,我们在之后的开发中就要充分的利用它。
- 尽可能的将页面拆分成一个个小的、可复用的组件。
- 这样让我们的代码更加方便组织和管理,并且扩展性也更强。
1.2 组件化的基本使用
组件的使用分成三个步骤
- 创建组件构造器。
- 注册组件
- 使用组件。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--3.使用组件-->
<cpn></cpn>
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件化构造器对象
const cpnC = Vue.extend({
// 模板
template: `
<div>
<h2>NBA球星名单</h2>
<p>我是kobe,我是总冠军!!!</p>
<p>我是Curry,我是三分雨!!!</p>
</div>`
});
// 2.注册组件
Vue.component('cpn', cpnC)
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app'
})
</script>
</body>
</html>
执行结果
1.3 注册组件步骤解析
Vue.extend( )
- 调用Vue.extend()创建的是一个组件构造器。
- 通常在创建组件构造器时,传入template代表我们自定义组件的模板。
- 该模板就是在使用到组件的地方,要显示的HTML代码。
Vue.component( )
- 调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
- 所以需要传递两个参数:1、注册组件的标签名 2、组件构造器
在Vue实例的作用范围内使用组件
组件必须挂载在某个Vue实例下,否则它不会生效。
1.4 全局组件和局部组件
调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。
如果注册的组件是挂载在某个实例中, 那么就是一个局部组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件和局部组件</title>
</head>
<body>
<div id="app">
<!--3.使用组件-->
<cpn></cpn>
</div>
<script src="../js/vue.js">