一、什么是组件化：
- 将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个功能块，而每一个组件又可以进行细分。
二、注册组件的基本步骤
- 1）创建组件构造器（Vue.extend()）
- 2）注册组件（Vue.component()）区分全局组件、局部组件
- 3）使用组件
三、简单示例1
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<!-- 创建组件模板 -->
<script type="text/x-template" id="cpn">
<div>
<h2>我是一个新注册的组件</h2>
</div>
</script>
<script type="text/javascript">
// 注册一个全局组件
Vue.component('cpn',{
template: "#cpn"
})
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>页面如下：
四、简单示例2
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 使用组件 -->
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<!-- 通过template标签创建组件模板 -->
<template id="cpn">
<h2>
我是一个新注册的组件
</h2>
</template>
<script type="text/javascript">
// 注册一个全局组件
Vue.component('cpn',{
template: "#cpn"
})
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
五、全局组件和局部组件
六、父组件和子组件
七、组件模板分离
1）第一种创建模板方式是通过script标签来创建，如示例1。注意：script的类型必须是text/x-template
2）第一种创建模板方式是通过template标签来创建，如示例2。