vue.js學習筆記 - 組件（二）

1、註冊

// 定義
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>

2、使用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>

3、動態props

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

使用 v-bind 的縮寫語法一般更簡單：

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

4、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>

5、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    
    }
  }
});

6、使用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>