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 }}
  '
  })
  <!– 在html中是短横线方式的 -->
  <menu-item menu-title=“nihao">

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: <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div>
})

2.插槽内容

Something bad happened.

5.3 具名插槽用法

1.插槽定义

2.插槽内容

标题内容

主要内容1

主要内容2

底部内容

演示

标题信息

主要内容1

主要内容2

底部信息

主要内容1

主要内容2

5.4 作用域插槽

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

1.插槽定义

• 
  
  {{item.name}}
  
  

2.插槽内容