props、$emit、slot插槽

一、props参数验证

约束组件调用者所传递的props参数的数据类型 数组操作方法 类型验证文档

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

二、$emit

用以实现子父通信 实际应用场景:

• 老父亲工资卡有很多钱
• 孩子向老父亲发一个信号，让他打钱

1. 子组件，触发子组件的事件函数，

2. 子组件在事件函数中通过this.$emit 触发自定义事件 give-me-money

3. 父级在调用子组件的时候，需要绑定对应的自定义事件

<my-child @give-me-money="父级的事件函数"></my-child>

4. 父级在事件函数中，可以得到自己传递的参数，进行后续操作

slot插槽

让组件调用者，可以向组件内部传递HTML结构

• 匿名插槽

• 具名插槽

• 向插槽批量写入内容

<template slot="s1">
    <h1>传递插槽内容2</h1>
    <h1>传递插槽内容2</h1>
    <h1>传递插槽内容2</h1>
</template>

• 插槽默认内容

<slot>
    <strong>这是匿名插槽的默认内容</strong>
</slot>

my-select组件拆分

组件粒度
根据实际场景，设定合理的组件粒度 将my-select拆分为两个组件

• my-select
• my-list 下拉列表组件

分割线组件

分割线示例

1. 结构

2. 样式

3. 功能

• orientation 文字位置 left/center/right 默认left
• dashed 是否虚线 true/false 默认false
• color 分割线颜色 颜色值 默认#444

动态绑定class、style 【使用频率很高】

文档 关于class的动态绑定语法

1. 单独使用三目运算
2. 单独使用数组
3. 单独使用对象
4. 数组内部用三目
5. 数据内部用对象