03 Vue组件化开发

1. 组件化开发思想

1.1 组件化思想

• 标准
• 分治
• 重用
• 组合

1.2 组件化规范: Web Components##

并不是所有浏览器都支持这个规范

• 我们希望尽可能多的重用代码
• 自定义组件的方式不太容易（html、css和js）
• 多次使用组件可能导致冲突

Web Components 通过创建封装好功能的定制元素解决上述问题

官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

Vue部分实现了上述规范

2. 组件注册

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.组件模板内容必须是单个跟元素

3.组件模板内容可以是模板字符串 ⚫

• 模板字符串需要浏览器提供支持（ES6语法）

4.组件命名方式

• 短横线方式

    Vue.component('my-component', { /* ... */ })
  

• 驼峰方式

    Vue.component('MyComponent', { /* ... */ })
  

2.4 局部组件注册

局部组件只能在注册他的父组件中使用

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
	el: '#app'
	components: {
		'component-a': ComponentA,
		'component-b': ComponentB,
		'component-c': ComponentC,
		}
})

3. 组件间数据交互

3.1 父组件向子组件传值

1.组件内部通过props接收传递过来的值

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

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

3.props属性名规则

• 在props中使用驼峰形式，模板中需要使用短横线的形式

• 字符串形式的模板中没有这个限制

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

  {{ menuTitle }}
  '
  })
  
  

4.props属性值类型

• 字符串 String
• 数值 Number 不绑定是字符类型
• 布尔值 Boolean 不绑定是字符类型
• 数组 Array
• 对象 Object

演示

    

        
{{pmsg}}
        
    
    
    

4.2 子组件向父组件传值

props传递数据原则：单向数据流

1.子组件通过自定义事件向父组件传递信息

扩大字体

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

3.子组件通过自定义事件向父组件传递信息

扩大字体

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

// $event是固定的 

4.3 兄弟组件间传值

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

var eventHub = new Vue()

2.监听事件与销毁事件

eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')

3.触发事件

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

5. 组件插槽

5.1 组件插槽的作用

父组件向子组件传递内容（模板内容）

组件插槽固定名称 slot

5.2 组件插槽基本用法

1.插槽位置

Vue.component('alert-box', {
	template: `
		

			Error!
			
		
	`
})

2.插槽内容

Something bad happened.

5.3 具名插槽用法

1.插槽定义

2.插槽内容

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

演示

    
    



    

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

        
        
            
            
主要内容1
            
主要内容2
            
        
    
    
    

5.4 作用域插槽

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

1.插槽定义

	

		
			{{item.name}}
		
	

2.插槽内容