本文共 4490 字，大约阅读时间需要 14 分钟。

------------------ 组件化开发思想 -------------------

1.0 组件化规范: Web Components

1. 我们希望尽可能多的重用代码
2. 自定义组件的方式不太容易（html、css和js）
3. 多次使用组件可能导致冲突
   官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

而 Vue部分实现了上述规范

------------------ 组件注册 -------------------

2.1 全局组件注册语法

Vue.component(组件名称, {   		data: 组件数据,		template: 组件模板内容	})		// 注册一个名为 button-counter 的新组件	Vue.component('button-counter', {   		data: function () {   			return {   				count: 0			}		},		template: '点击了{   { count }}次.'	})

2.2 组件用法

   
	
         组件名
   
   
	
       可以多次调用	
    	
    
   

2.3 组件注册注意事项

1. data必须是一个函数

2. 组件模板内容必须是单个跟元素（ 平级根元素只能有一个 ）

只能这样      template: `        
   
          
    点击了{    {count}}次          
    测试123        
   
      `,	不能   这就不是单个根元素	    template: `          点击了{    {count}}次          测试123      `,

3. 组件模板内容可以是模板字符串
   模板字符串需要浏览器提供支持（ES6语法）
4. 组件命名方式
   如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

例如： Vue.component('HelloWorld', {   	template:`	
     字符串模板中可以使用`})普通标签模板中 需要修改：
   	短横线方式	Vue.component('my-component', {    /* ... */ })    驼峰方式	Vue.component('MyComponent', {    /* ... */ })

2.4 局部组件注册（写在实例里面）

局部组件只能在注册他的父组件中使用	1. 先定义一个 var      var ComponentA = {      	   data: function(){      	     return {        	     msg: 'HelloJerry'          }       },       template: '
   
    {   {msg}}
   
'    };        2. 在实例里面调用（第一个是组件名称，第二个预先设置好的参数）	new Vue({   		el: '#app'		components: {   			'component-a': ComponentA,			'component-b': ComponentB,			'component-c': ComponentC,		}	})

------------------ Vue调试工具用法 -------------------

可以自己百度

------------------ 组件间数据交互 -------------------

4.1 父组件向子组件传值

1. 组件内部通过props接收传递过来的值 （ props传递数据原则：单向数据流）

Vue.component(‘menu-item', {   		props: ['title'],		template: '
   
    {   { title }}
   
'	})

2. 父组件通过属性将值传递给子组件

3. props属性名规则 （跟组件名 差不多 都需要在 html 中 转换短横线形式）

1. 在props中使用驼峰形式，普通的标签模板中 需要转换为短横线
2. 字符串形式的模板中没有这个限制

Vue.component(‘menu-item', {   	// 在 JavaScript 中是驼峰式的		props: [‘menuTitle'],		template: '
   
    {   { menuTitle }}
   
'	})		
   
   

4. props属性值类型

加 : 就是原始的数组 不加冒号会转变为字符串 比如 :pnum=‘12’ 是数字型 pnum=‘12’ 是字符串

1. 字符串 String
2. 数值 Number
3. 布尔值 Boolean
4. 数组 Array
5. 对象 Object

4.2 子组件向父组件传值

1. 子组件通过自定义事件向父组件传递信息 （不携带参数）

扩大字体

2. 父组件监听子组件的事件

3. 子组件通过自定义事件向父组件传递信息 （携带参数）

扩大字体

4. 父组件监听子组件的事件 （这个 $event 等于 0.1）

4.3 非父子组件间传值

1. 单独的事件中心管理组件间的通信

var eventHub = new Vue() // 名字任意

2. 监听事件与销毁事件（监听事件 写在 mounted:function(){} 里面）

eventHub.$on('add-todo', (val)=>{   } ) 	eventHub.$off('add-todo')

3. 触发事件

eventHub.$emit(‘add-todo', val)

------------------ 组件插槽的作用 -------------------

作用：父组件向子组件传递内容

5.2 组件插槽基本用法（父组件向子组件传递内容）

1. 插槽位置 （slot）

Vue.component('alert-box', {   	！！！如果父组件没有内容， 则显示slot里面的内容，	！！！ 如果父组件有内容，则slot的内容则会被覆盖消失		template: `			
   
				
    Error!				
    
     默认内容
    			
   
`	})

2. 插槽内容（ slot 里显示 Something bad happened）

   
    Something bad happened.
   

5.3 具名插槽用法（主要是 设置 slot 的 name 属性）

1. 插槽定义

Vue.component('base-layout', {               template: `        
   
          
    
            
               
    
          
    
            
               
    
          
            
   
      `        });        var vm = new Vue({               el: '#app',            data: {               }        });

2. 插槽内容

   
        
                
     
标题信息
            
     
主要内容1
            
     
主要内容2
            
     
底部信息信息
        
            
                
                 
     
主要内容1
            
     
主要内容2
            
             
        
   

5.4 作用域插槽

应用场景：父组件对子组件的内容进行加工处理

  
   
    
    
        		  2. 给 templat 设置 slot-scope='slotProps'      
         
      
   
    Vue.component('fruit-list', {         props: ['list'],      1. 给 slot 设置 v-bind:info(任意名字) = ''      template:         `            
   
          
    
            
     
      {    {item.name}}
               
        
   
      `    });    var vm = new Vue({         el: '#app',      data: {           list: [{             id: 1,          name: 'apple'        },{             id: 2,          name: 'orange'        },{             id: 3,          name: 'banana'        }]      }    });

6. 基于组件的案例

案例：需求分析

1. 按照组件化方式实现业务需求

根据业务功能进行组件化划分

1. 标题组件（展示文本）
2. 列表组件（列表展示、商品数量变更、商品删除）
3. 结算组件（计算商品总额）

2. 功能实现步骤

实现整体布局和样式效果

划分独立的功能组件 组合所有的子组件形成整体结构 逐个实现各个组件功能 标题组件 列表组件 结算组件

转载地址：http://dgzsz.baihongyu.com/