day4.组件概念

1. 所需知识

   1. 箭头函数

      • 任何可以书写匿名函数的位置都可以书写匿名函数
      • 箭头函数将会绑定this，为当前书写位置的this值

   2. 模块化

      没有模块化：全局变量污染、难以管理依赖

      常见的模块化标准：CommonJS（Node.js带来的）、ES6 Module（官方）、AMD、CMD、UMD

2. 组件概念

   一个完整的网页是复杂的，如果将其作为一个整体来进行开发，将会遇到下面困难：

   • 代码凌乱臃肿
   • 不易团队协作
   • 难以复用

   因此，Vue.js推荐使用更加精细化的控制方案———组件化开发

   所谓组件化，就是把一个页面中区域功能细分，每一个区域成为一个组件，每个组件包涵：

   • 功能（JS代码）

   • 内容（HTML模板代码）

   • 样式（CSS代码）

     注：由于没有构建工具的支持，CSS代码暂时无法放到组件中

3. 组件开发

   1. 创建组件

      组件是根据一个普通的配置对象创建的，所有要开发一个组件，只需要一个配置对象即可。

      该配置对象和Vue实例几乎是一样的：

      var Mycomponent = {
              data(){
                  return {
                      title:'这是标题'
                  }
              },
              methods:{
      
              },
              computed:{},
              // render:{}//render跟template任意写一个
              template:'<h1>{{title}}</h1>'
          }
      

      需要注意的是,组件配置对象和vue实例有以下差异：

      • 无el:
      • data必须是一个函数，该函数返回的对象作为数据
      • 由于没有el配置，组件的虚拟DOM树必须定义在template或render中

   2. 注册组件

      注册组件分为全局注册和局部注册

      1. 全局注册

         一旦全局注册课一个组件，整个应用中任何地方都可以使用该组件

         

         全局注册的方式：

         // 全局注册   
         //参数1：组件名称，将来在模板中要使用该组件时，会用到
         //参数2：组件的配置对象
         Vue.component('MyComponent',MyCompuent);//这行代码运行后，即可在模板中使用注册的组件
         

         使用方式：

         <MyComponent/>
         <!--或者-->
         <MyComponent></MyComponent>
         

         注：在一些大工程项目中，很多组件大多数时候都是不需要全局使用，因此，除非组件特别通用，否则不建议使用全局注册，会影响打包结果（具体原理见Webpack)；

      2. 局部注册

         就是在需要用到的地方注册

局部注册的方式：在使用组件的组件或实例中加入一个配置

var vm = new Vue({
         el:"#id",
         components:{
             // 属性名为组件名称，将在模板中使用该名称
             // 属性值为组件的配置对象
             MyComponent:MyCompuent
         },
         template:"<MyComponent/>",
         methods:{}
     })

3. 应用组件

   在模板中使用组件特别简单，就是把组件名当做HTML元素名使用即可，但要注意以下几点：

   • 1.组件必须结束

     组件可以自结束，也可以用结束标记结束，但必须要有结束，即：

     <MyComponent/> 
     <MyComponent></MyComponent>
     

     不能：

     <MyComponent> 
     

   • 2.组件的命名

     无论使用那种方式注册组价，组件的命名需要遵循规范。

     组件可以使用kebab-case 短横线命名法，也可以使用PascalCase 大驼峰命名法，实例如下：

     var otherComponent = {
     components：{
     	my-component:MyComponent,//或者
     	MyComponent：MyComponent
     }
     

4. 组件树

   一个组件创建好后，往往会在各种地方使用它。因此，它可能出现出现在Vue实例中，也可能出现在其他组件中，于是就有了组件树的概念

5. 向组件传递数据

   大部分组件要完成自身的功能，都需要一些额外的信息。例如一个头像组件，需要告诉组件头像的url，因此就需要在使用组件时想组件传递数据，传递数据的方式有很多种，常见的一种是使用组件属性component props

   首先要在被使用的组件中声明，本组件需要接收哪些属性，方便外部传入：

   var MyComponent = {
   	props:['p1','p2','p3'],
   	//和Vue实例类似，在使用组件时，也会创建组件的实例
   	//而组件的属性会被提取到组件实例中，因此可以在模板中直接使用
   	template:"<div>{{p1}},{{p2}}<</div>"
   }
   

   在使用组件时，向其传递属性：

   var UseMycomponent = {
   	components:{
   		MyComponent
   	},
   	data(){
   		return {
   			a:1
   		}
   	},
   	methods:{},
   	template:"<MyComponent :p1="a" :p2="2" p3="3"/>"
   }
   

  注意:在组件中，属性是只读的，绝不可以更改，这叫做单向数据流