前言：这次的笔记主要记下组件的一些相关内容。怎样创建、注册和使用组件。以及组件与组件之间的联系。还有组件那些简化写法哦！
什么叫组件化？
简单来说，组件化就是把一个大的东西拆分成很多个小的东西。放到页面上来说，就是把页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能。利于整个页面的管理和维护。
一、Vue的组件化思想
-
给我们提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何应该都会被抽象成一颗组件树。
-
在应用中，要尽可能的将页面拆分成一个个小的、可复用的组件
-
让代码更加方便组织和管理，并且扩展性也更强
二、注册组件的基本步骤
- 调用Vue.extend（）方法创建组件构造器
- 调用Vue.component()方法注册组件
- 在Vue实例的作用范围内使用组件
<div id="app">
<!--3.使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script>
//1.创建组件构造器对象
const cpnn = Vue.extend({
template: //在template里自定义组件模板（要写的东西）
<div>
<h2>我爱学习</h2>
<p>好好学习，天天向上</p>
</div>
})
//2.注册组件---Vue.component("调用时的名字（起名）",创建时的名字)
//这里创建的是全局组件，就是可以在多个vue的实例下面使用
Vue.component("my-cpn",cpnn)
const app = new Vue({
//这是一个vue实例
el:"#app",
data:{
message:"学习"
}
})
</script>
结果是：
我爱学习
好好学习，天天向上
我爱学习
好好学习，天天向上
三、全局组件和局部组件
全局组件
- 使用Vue.component()注册
- 可以在多个Vue实例下使用
局部组件
- 使用components关键字注册
- 在vue实例里面注册，即与data是同等的
- 只能在此vue实例下使用
<!-- 这是一个全局组件的注册-->
Vue.component("mycpn",cpnc)
<script>
//创建组件
const cpnc = Vue.extend({
template:
<div>
<h2>我爱学习</h2>
<p>好好学习，天天向上</p>
</div>
})
const app = new Vue({
el:"#app",
//这是一个局部组件的注册（mycpn是要使用时的标签名）
//且只能在di为app的标签名下使用
components:{
mycpn:cpnc
}
})
</script>
四、父组件与子组件
假设已经创建了两个组件构造器a和b，当在b里用components注册组件a时，那么a就是组件b的子组件，b就是a的父组件。（简单来说，在哪里注册就是哪里的子组件）
<div id = "app">
<cpn2></cpn2><!--这里使用了cpn2，里面还包含着cpn1-->
<cpn1></cpn1><!--我在这里是没有效的哦!-->
</div>
<script>
//创建第一个组件构造器（它是子组件）
const cnpC1 = Vue.extend({
template:
<div>
<h3>我爱学习</h3>
<p>好好学习，天天向上</p>
</div>
})
//创建第二个组件构造器（它是父组件）
const cpnC2 = Vue.extend({
template:
<div>
<h3>我爱游戏</h3>
<p>天天游戏，日日快乐</p>
</div>
,
//在cpnC2里注册cpnC1，使cpnC1成为他的子组件
components:{
cnp1:cnpC1 //cnp1是起的名哦！
}
})
const app = new Vue({
el:"#app",
components:{
cnp2:cpnC2 //在vue实例里注册cnpC2，就可以应用到作用域中啦！！
}
})
</script>
注：上面这个例子中，在作用域中使用 cpn1 是无效的，因为要想在作用域中有效，必须是全局组件，或者是在vue实例中注册的组件。
五、注册组件的语法糖
主要是省去了调用Vue.extend()步骤，可以直接使用一个对象来替代。
<div id = "app">
<cpn2></cpn2><!--这是一个局部组件-->
<cpn1></cpn1><!--这是一个全局组件-->
<cpn3></cpn3><!--这是一个全局组件-->
</div>
<script>
const cpnC3 = Vue.extend({
template:
<div>
<h3>我爱游戏</h3>
<p>天天游戏，日日快乐</p>
</div>
})
//这里的cpn3是没有使用语法糖
Vue.component("cpn3",cpnC3)
//这里使用语法糖来注册cpn1，省去了extend（）
Vue.component("cpn1",{
template:
<div>
<h3>我爱学习</h3>
<p>好好学习，天天向上</p>
</div>
})
const app = new Vue({
el:"#app",
components:{
//这里使用语法糖注册cpn2
cnp2:{
template:
<div>
<h3>我爱游戏</h3>
<p>天天游戏，日日快乐</p>
</div>
}
}
})
</script>
以上例子展示了怎样用语法糖注册全局组件和局部组件。
六、组件模板的抽离写法
这是个什么意思呢？在上面的这些例子中，我们会发现在注册一个组件时，会在template关键字中写入HTML代码，但是这样看起就会特别乱。为了更简化页面，我们可以使用组件模板的抽离写法。
方法：（都是写在body标签里面）
- 使用script标签，type的类型必须是text/x-template
- 使用template标签
- 最后再标签里绑定id
<!--1.使用script标签,要绑定一个id用来关联-->
<script type="text/x-template" id="cpn">
<div>
<h2>好好学习</h2>
<p>好好学习，天天向上</p>
</div>
</script>
<!--2.使用template标签-->
<template id="cpn">
<div>
<h2>好好学习</h2>
<p>好好学习，天天向上</p>
</div>
</template>
<!--开始注册啦！-->
<script>
Vue.component("cpn",{
template:"#cpn" //这里要传入id哦！
})
</script>
是不是将template中的HTML分离出来写，再挂载在对应的组件上，会变得清晰一些呢！
七、组件里的data
- 组件对象也有一个data属性
- 这个data属性必须是一个函数
- 这个函数返回一个对象，对象内部保存着数据
<template id = "app">
<div>
<h2>{
{title}}</h2>
<p>好好学习，天天向上</p>
</div>
</template>
<script>
Vue.component("cpn",{
template:"#app",
data(){
return {
title:"好好学习"
}
}
})
</script>