Vue 组件

1.组件注册

(1) 全局注册

通过Vue.componet创建的组件是全局注册的, 也就是说它们在注册之后可以用在任何创建的Vue根实例的模板中.

(2)局部注册

如果你使用一个像webpack这样的构建系统, 全局注册所有的组件意味着即便你已经不再使用一个组件了, 它仍然会被包含在你最终的构建结果中. 这会造成用户下载的JavaScript的无谓的增加.

在这些情况下, 可以通过一个普通的JavaScript对象来定义组件:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

2. Prop

(1) 大小写

HTML中的特性名是在小写不敏感的, 所以浏览器会把所有大写字符解释为小写字符. 这意味着录你使用DOM中的模板时, camelCase的prop名需要使用其等价的kebab-case命名

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

(2) 类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

(3) 单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定: 父级prop的更新会向下流动到子组件中, 但是反过来则不行.

(4) prop验证

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
      }
    }
  }
})

3. 自定义事件

在v-on事件监听器在DOM模板中会被自动转换为全小写, 所以v-on:myEvent将会变成v-on:myevent, 导致myEvent不可能被监听到.

(1) 自定义组件的v-model

一个组件上的v-model默认会利用名为value的prop和名为input的事件, 但是像单选框, 复选框类型的输入控件可能会将value特性用于不同的目的. model选项可以用于避免这样的冲突.

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

这个lovingVue的值将会传入这个名为checked的prop. 同时当<base-checkbox>触发一个change事件并附带一个新的值的时候.

4. 插槽

(1) 插槽内容

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在<navigation-link>的模板中可能会写为:

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当组件渲染的时候, <slot></slot>将会被替换为"Your Profile", 插槽内可以包含任何模板代码.

5. 动态组件& 异步组件

(1) 在动态组件上使用keep-alive

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