关于Vue的一些小笔记（六）组件基础

前言：这次的笔记主要记下组件的一些相关内容。怎样创建、注册和使用组件。以及组件与组件之间的联系。还有组件那些简化写法哦！

什么叫组件化？

简单来说，组件化就是把一个大的东西拆分成很多个小的东西。放到页面上来说，就是把页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能。利于整个页面的管理和维护。

一、Vue的组件化思想

• 给我们提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何应该都会被抽象成一颗组件树。

• 在应用中，要尽可能的将页面拆分成一个个小的、可复用的组件

• 让代码更加方便组织和管理，并且扩展性也更强

二、注册组件的基本步骤

• 调用Vue.extend（）方法创建组件构造器
• 调用Vue.component()方法注册组件
• 在Vue实例的作用范围内使用组件

<div id="app">
    
    <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的父组件。（简单来说，在哪里注册就是哪里的子组件）

    <cpn2>cpn2>
    <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()步骤，可以直接使用一个对象来替代。

    <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标签里面）

1. 使用script标签，type的类型必须是text/x-template
2. 使用template标签
3. 最后再标签里绑定id

<script type="text/x-template" id="cpn">
	<div>
		<h2>好好学习</h2>
		<p>好好学习，天天向上</p>
    </div>
script>


<template id="cpn">
    <div>
		<h2>好好学习h2>
		<p>好好学习，天天向上p>
    div>
template>


<script>
    Vue.component("cpn",{
        template:"#cpn"  //这里要传入id哦！
    })
script>

是不是将template中的HTML分离出来写，再挂载在对应的组件上，会变得清晰一些呢！

七、组件里的data

• 组件对象也有一个data属性
• 这个data属性必须是一个函数
• 这个函数返回一个对象，对象内部保存着数据