vue组件化

• 什么是组件化
  将一个完整的页面分成很多个组件，每个组件用于实现页面的一个功能块，每一个组件又可以细分。
• 组件化基本使用

  • 组件化使用三个步骤：
    1.创建组件构造器
    2.注册组件
    3.使用组件

    
    
    组件化使用步骤

• 全局组件
  全局组件：

// 注册组件（全局组件），可以在多个vue实例下使用
Vue.component('my-cpn', cpnC);

局部组件：

  const app = new Vue({
    el: '#app',
    data: {

    },
    // 注册局部组件，只能在该vue实例中使用
    components: {
      my_cpn: cpnC
    }
  })

• 父组件和子组件

• 注册组件语法糖和组件模板抽离写法

• 组件中的data和方法

• 组件通信
  1.父传子props
  
  父子组件通信
  
  在组件中使用props来声明需要从父级接收的数据
  props的值有两种方式：
  方式一：字符串数组，数组中的字符串就是传递时的名称
  方式二：对象，对象可以设置传递时的类型，也可以设置默认值等

  function Person(name){
    this.name = name
  }
  Vue.component('my-conmponent', {
    props: {
      // 基础类型检查（null匹配任何类型）
      itemA: Number,
      // 多个可能的类型
      itemB: [String, Number],
      // 必须传的
      itemC: {
        type: String,
        required: true
      },
      // 有默认值的
      itemD: {
        type: String,
        default: 'ABC'
      },
      // 有默认值的数组
      itemE: {
        type: Array,
        default() {
          return [];
        }
      },
      // 有默认值的对象
      itemF: {
        type: Object,
        default() {
          return {message: 'hello'}
        }
      },
      // 自定义验证函数
      itemG: {
        validator(value) {
          return ['success','warning','danger'].indexOf(value) !== -1
        }
      },
      // 验证自定义类型
      itemH: Preson
    }
  })

举例：

2.子传父

• 组件访问
  1.父访问子

  

    
    
    
    按钮
  

  
  

2.子访问父
不建议使用

• 组件的插槽
  组件的插槽是为了让我们封装的组件更具扩展性，让使用者可以决定组件内部的一些内容到底展示什么。
  将共性抽取到组件中，将不同暴露为插槽。可以让使用者根据自己的需求，决定插槽中插入的内容。

  

    按钮
    哈哈哈
    
  

  

  

插槽

• 具名插槽

  

    
    span
    
      
      
    
  

  

  

具名插槽

• 作用域插槽
  父组件替换插槽的标签，但是内容由子组件来提供。