Vue 组件化开发

组件化开发思想

• 现实中的组件化思想体现

  
  
  
  

  （1）标准
  （2）分治
  （3）重用
  （4）组合

• 编程中的组件化思想体现

  
  

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

组件注册

• 全局组件注册语法

  
  
  
  

• 组件用法

  
  
  单独使用
  
  
  重复使用

• 组件注册注意事项
  （1）data必须是一个函数
           分析函数与普通对象的对比
  （2）组件模板内容必须是单个跟元素
           分析演示实际的效果
  （3）组件模板内容可以是模板字符串
           模板字符串需要浏览器提供支持（ES6语法）

  
  
  
  

  （4）组件命名方式
           ① 短横线方式
           ② 驼峰方式

  
  
  
  
  
  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件。

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

  
  
  
  

组件间数据交互

• 父组件向子组件传值
  （1）组件内部通过 props 接收传递过来的值

  
  
  
  

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

  
  
  
  （3）props属性名规则
           ① 在props中使用驼峰形式，模板中需要使用短横线的形式。
           ② 字符串形式的模板中没有这个限制。
  
  
  
  
  

  （4）props属性值类型
           ① 字符串 String
           ② 数值 Number
           ③ 布尔值 Boolean
           ④ 数组 Array
           ⑤ 对象 Object

  
  
  注意是否属性绑定
  
  

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

  
  
  
  

  （2）父组件监听子组件的事件

  
  

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

  
  
  
  

  （2）父组件监听子组件的事件

  
  

• 非父子组件间传值
  
  
  （1）单独的事件中心管理组件间的通信
  （2）监听事件与销毁事件
  （3）触发事件
  
  
  
  
  参考代码：

  
      
      
  

  

      

          
父组件
          

              销毁事件
          
          
          
      

      
      

  

组件插槽

• 组件插槽的作用
  父组件向子组件传递内容。

  
  

• 组件插槽基本用法
  （1）插槽位置

  
  
  
  

  （2）插槽内容

  
  

• 具名插槽用法
  （1）插槽定义

  
  
  
  

  （2）插槽内容

  
  

• 作用域插槽
  应用场景：父组件对子组件的内容进行加工处理。
  （1）插槽定义
  
  
  （2）插槽内容
  
  
  参考代码：