组件化
一、什么是组件化
将大的问题分成一个个小问题，放在开发中就是讲一个页面拆分成一个个小的功能块，再将所有功能块结合在一起，就可以完成大的功能。
二、vue组件化思想
它提供了一种抽象，让我们可以开发出一个个独立克服用的小组件来构造我们的应用、
任何的应用都会被抽象成一棵组件树。
在开发中尽可能的将页面拆分成一个个小的、可复用的组件，这样让我们的代码更加方便组织和管理，并且扩展性也更强。
三、注册组件的基本步骤
使用组件一般步骤：
1、创建组件构造器
调用Vue.extend()方法创建组件构造器
//1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
</div>`,
});
2、注册组件
调用Vue.component()方法注册组件
//注册组件 该方法参数为两个，前者是组件在使用时的标签名，后者是创建的组件构造器对象
Vue.component("mycpn", cpnC);
const app = new Vue({ //Vue的实例对象
el: "#app",
data: {
meaasge: "nihao",
},
});
3、使用组件
在Vue实例的作用范围内使用组件
<div id="app">
<mycpn></mycpn>
</div>
将组件标签写在div外边没有用，无法被浏览器解析
四、全局组件和局部组件
全局组件：通过Vue.component()注册的组件，为全局组件，可以在多个Vue实例下使用
局部组件：去Vue的某个实例中注册组件即为局部组件，但只能在注册时使用的实例对象中使用
代码中注册的cpn组件只可在id为app的实例对象中使用
const app = new Vue({
el: "#app",
data: {
meaasge: "nihao",
},
components: {
//cpn为使用组件时的标签名
cpn: cpnC,
},
});
五、父组件与子组件
子组件在父组件中以局部组件注册方式注册，父组件再在vue实例对象中进行注册。
子组件如果想要单独使用，则需要在vue实例中进行注册。
//创建第一个组件（子组件）
const cpnC1 = Vue.extend({
template: `
<div>
<h1>我是标题1</h1>
</div>`,
});
//创建第二个组件(父组件)
const cpnC2 = Vue.extend({
template: `
<div>
<h1>我是标题2</h1>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC1,
},
});
// root组件
const app = new Vue({
el: "#app",
data() {
return {
message: "nihao",
};
},
components: {
cpn2: cpnC2,
},
});
六、注册组件语法糖写法
Vue为了简化注册组件的过程，提供了注册的语法糖，主要是省去了调用Vue.extend()的步骤，而是可以在直接使用一个对象来代替。
1、注册全局组件
//全局组件注册的语法糖
Vue.component("cpn1", {
template: `
<div>
<h1>我是标题1</h1>
</div>`,
});
2、注册局部组件
const app = new Vue({
el: "#app",
data() {
return {
message: "nihao",
};
},
//语法糖注册局部组件
components: {
cpn2: {
template: `
<div>
<h1>我是标题2</h1>
</div>`,
},
},
});
七、组件模板抽离写法
<!-- 1.通过script标签，注意类型 -->
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题1</h2>
</div>
</script>
<!-- 通过template标签 -->
<template id="cpn">
<div>
<h1>我是标题2</h1>
</div>
</template>
Vue.component("cpn", {
template: "#cpn",
});
\
