一、注册

// 定义
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
});

// 注册
Vue.component('my-component', MyComponent);

// 建立根实例
new Vue({
  el: '#example'
});
<div id="example">
  <my-component></my-component>
</div>

或许直接写成：

Vue.component('my-component', {
     template: '<div>A custom component!</div>'
});

 // 建立根实例
new Vue({
    el: '#example'
});
<div id="example">
     <my-component></my-component>
</div>

二、运用prop 通报数据

实例一：

Vue.component('child', {
  // 声明 props
  props: ['msg'],
  // prop 能够用在模板内
  // 能够用 `this.msg` 设置
  template: '<span>{{ msg }}</span>'
});
<child msg="hello!"></child>

实例二：

     Vue.component('child', {
      // camelCase in JavaScript
      props: ['myMessage'],
      template: '<span>{{ myMessage }}</span>'
    });
    <!-- kebab-case in HTML -->
    <child my-message="hello!"></child>
    
    
    

三、动态props

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

运用 v-bind 的缩写语法一般更简朴：

<child :my-message="parentMsg"></child>

四、Prop 绑定范例

prop 默许是单向绑定：当父组件的属性变化时，将传导给子组件，然则反过来不会。这是为了防备子组件无意修改了父组件的状况——这会让运用的数据流难以明白。不过，也能够运用 .sync 或 .once 绑定修饰符显式地强迫双向或单次绑定：

比较语法：

<!-- 默许为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

其他实例：

<modal :show.sync="showModal">
    <h3 slot="header">custom header</h3>
  </modal>
</div>

五、Prop 考证

组件能够为 props 指定考证请求。当组件给其他人运用时这很有效，由于这些考证请求构成了组件的 API，确保其他人正确地运用组件。此时 props 的值是一个对象，包括考证请求：

Vue.component('example', {
  props: {
    // 基本范例检测 （`null` 意义是任何范例都能够）
    propA: Number,
    // 必须且是字符串
    propB: {
      type: String,
      required: true
    },
    // 数字，有默许值
    propC: {
      type: Number,
      default: 100
    },
    // 对象/数组的默许值应该由一个函数返回
    propD: {
      type: Object,
      default: function () {
        return { msg: 'hello' }
      }
    },
    // 指定这个 prop 为双向绑定
    // 假如绑定范例不对将抛出一条正告
    propE: {
      twoWay: true
    },
    // 自定义考证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    },
    // 转换函数（1.0.12 新增）
    // 在设置值之前转换值
    propG: {
      coerce: function (val) {
        return val + '' // 将值转换为字符串
      }
    },
    propH: {
      coerce: function (val) {
        return JSON.parse(val) // 将 JSON 字符串转换为对象
      }
    }
  }
});

其他实例：

Vue.component('modal', {
  template: '#modal-template',
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true    
    }
  }
});

六、运用slot分发内容

<slot> 元素作为组件模板当中的内容分发插槽。这个元素本身将被替代。
有 name 特征的 slot 称为定名 slot。 有 slot 特征的内容将分发到名字相匹配的定名 slot。

比方，假定我们有一个 multi-insertion 组件，它的模板为：

<div>
  <slot name="one"></slot>
  <slot></slot>
  <slot name="two"></slot>
</div>

父组件模板：

<multi-insertion>
  <p slot="one">One</p>
  <p slot="two">Two</p>
  <p>Default A</p>
</multi-insertion>

衬着效果为：

<div>
  <p slot="one">One</p>
  <p>Default A</p>
  <p slot="two">Two</p>
</div>