Vue_组件基础总结

组件名

两种方式： kebab-case 和 PascalCase。 也就是说 my-component-name 和 MyComponentName 都是可接受的。

prop

两种方式： (kebab-case 和 camelCase)。

类型（8个）：  Number  Boolean  String  Symbol ，还有Array  Object  Function  Date  
？？？基本数据类型 还有 Null Undefined
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
      }
    }
  }

父子组件通信 是一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

.sync修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。

组件数据

组件的data 和 实例的data 有点不一样，实例中的data 可以是一个对象， 但是组件的data 必须是一个方法。

动态组件

在一个多标签的界面中使用 is attribute 来切换不同的组件：

// component 是一个占位符， :is属性，可以用来指定要展示的组件名称 
<component v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。---- 保留组件 缓存

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

注意： 和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。