vue(2)

Vue组件化开发

• 组件化开发的思想
• 组件的注册
• 组件间的数据交互
• 组件插槽的用法
• Vue调试工具的用法

组件开发思想

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

组件化规范:Web Components(并非所有的浏览器都支持)

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

Web Components通过创建封装好功能的定制元素解决上述问题(Vue部分实现了上述规范)

组件注册

Vue.component('组件名称',{
    // 组件内容
    data: '组件数据',
    template: '组件模板内容'
})

    
{{name}}
    
    
    
    

组件注册注意事项：

1. data必须是一个函数 => 分析函数和普通对象的对比
2. 组件模板内容必须是单个根元素 => 分析演示实例的效果
3. 组件模板内容可以是模板字符串 => 模板字符串需要浏览器提供支持(ES6语法)
4. 组建的命名方式

• 短横线方式Vue.component('my-component',{ /*...*/ }
• 驼峰式Vue.component('myComponent',{ /*...*/ }
• 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中使用驼峰的方式命名组件，但是在普通的标签模板中，必须使用短横线的方式命名组件

局部组件注册

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
    el: '#app',
    components: {
        'component-a' :componentA,
        'component-b' :componentB,
        'component-c' :componentC
    }
})
// 局部组件只能在其父组件中使用

Vue调试工具

1. 克隆仓库
2. 安装依赖包
3. 构建
4. 打开Chrome扩展页面
5. 选中开发者模式
6. 加载已解压的扩展，选择shells/chrome

组件间的数据交互

1. 父组件向子组件传值

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

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

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

   • props属性名规则

     • 在props中使用驼峰形式，模板中则需要使用短横线的形式
     • 字符串形式的模板中则没有这个限制

     
         
     {{name}}
         
     {{pmsg}}
         
     
     
     

   • props属性值类型

     • 字符串 String
     • 数值 Number
     • 布尔值 Boolean
     • 数组 Array
     • 对象 Object

     
         
     {{name}}
         
     {{pmsg}}
         
         
     
     
     

2. 子组件向父组件传值

   • 子组件通过自定义事件向父组件传递消息
     扩大字体

   • 父组件监听子组件事件
     

     
         
     {{name}}
         
     {{pmsg}}
         
     
     
     

   • 子组件通过自定义事件向父组件传递信息
     扩大字体

   • 父组件监听子组件事件
     

     
         
     {{name}}
         
     {{pmsg}}
         
         
     
     
     

3. 非父子组件间传值(兄弟间组件传值)

   • 单独的事件中心管理组件间的通信 var eventHub = new Vue()

   • 监听事件与销毁事件

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

   • 触发事件eventHub.$emit('add-todo', id)

   
       
   {{name}}
       
   
           销毁事件
       
       
       
   
   
   

组件插槽

• 父组件向子组件传递内容

插槽基本用法

1. 插槽位置

   
       
   {{name}}
       有bug!
       有一个警告!
       
   
   
   

2. 具名插槽用法

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

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

3. 作用域插槽

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

  
  
      
  
          
              {{item.name}}