Vue.js学习手册（3）

组件

• 组件 (Component) 是 Vue.js 最强大的功能之一
• 组件可以扩展 HTML 元素，封装可重用的代

组件注册

全局注册

• Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象
• 全局组件注册后，任何vue实例都可以用

组件基础用

组件注意事项

• 组件参数的data值必须是函数同时这个函数要求返回一个对象
• 组件模板必须是单个根元素
• 组件模板的内容可以是模板字符串

局部注册

• 只能在当前注册它的vue实例中使用

Vue 调试工具

Vue组件之间传值

父组件向子组件传值

• 父组件发送的形式是以属性的形式绑定值到子组件身上。
• 然后子组件用属性props接收
• 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

  

    
{{pmsg}}
     
     
    
    
    
  

  

子组件向父组件传值

• 子组件用$emit()触发事件
• $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
• 父组件用v-on 监听子组件的事件

 

    
{{pmsg}}
      
    
  
  
  

兄弟之间的传递

• 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
  • 提供事件中心 var hub = new Vue()
• 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
• 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
• 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

 

    
父组件
    

      销毁事件
    
    
    
  
  
  

组件插槽

• 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

匿名插槽

  

      
    有bug发生
    有一个警告
    
  

  

具名插槽

• 具有名字的插槽
• 使用 中的 "name" 属性绑定元素

  

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

    
        
      
      
主要内容1
      
主要内容2
      
    
  
  
  

作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的slot，又可以使slot内容不一致

购物车案例

1. 实现组件化布局

• 把静态页面转换成组件化模式
• 把组件渲染到页面上

2、实现 标题和结算功能组件

• 标题组件实现动态渲染
  • 从父组件把标题数据传递过来 即 父向子组件传值
  • 把传递过来的数据渲染到页面上
• 结算功能组件
  • 从父组件把商品列表list 数据传递过来 即 父向子组件传值
  • 把传递过来的数据计算最终价格渲染到页面上

3. 实现列表组件删除功能

• 从父组件把商品列表list 数据传递过来 即 父向子组件传值
• 把传递过来的数据渲染到页面上
• 点击删除按钮的时候删除对应的数据
  • 给按钮添加点击事件把需要删除的id传递过来
    • 子组件中不推荐操作父组件的数据有可能多个子组件使用父组件的数据 我们需要把数据传递给父组件让父组件操作数据
    • 父组件删除对应的数据

4. 实现组件更新数据功能 上

• 将输入框中的默认数据动态渲染出来
• 输入框失去焦点的时候 更改商品的数量
• 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据

• 父组件中接收子组件传递过来的数据并处理 
  

5. 实现组件更新数据功能 下

• 子组件通过一个标识符来标记对用的用户点击 + - 或者输入框输入的内容
• 父组件拿到标识符更新对应的组件