Vue.js：組件

ylbtech-Vue.js：組件

 

1.返回頂部

一、

Vue.js 組件

組件（Component）是 Vue.js 最強大的功能之一。

組件能夠擴展 HTML 元素，封裝可重用的代碼。

組件系統讓咱們能夠用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面均可以抽象爲一個組件樹：

註冊一個全局組件語法格式以下：

Vue.component(tagName, options)

tagName 爲組件名，options 爲配置選項。註冊後，咱們能夠使用如下方式來調用組件：

<tagName></tagName>

全局組件

全部實例都能用全局組件。

全局組件實例

註冊一個簡單的全局組件 runoob，並使用它：

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 註冊
Vue.component('runoob', {
  template: '<h1>自定義組件!</h1>'
})
// 建立根實例
new Vue({
  el: '#app'
})
</script>

嘗試一下 »

局部組件

咱們也能夠在實例選項中註冊局部組件，這樣組件只能在這個實例中使用：

局部組件實例

註冊一個簡單的局部組件 runoob，並使用它：

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}
 
// 建立根實例
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

嘗試一下 »

---

Prop

prop 是父組件用來傳遞數據的一個自定義屬性。

父組件的數據須要經過 props 把數據傳給子組件，子組件須要顯式地用 props 選項聲明 "prop"：

Prop 實例

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 註冊
Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 一樣也能夠在 vm 實例中像 "this.message" 這樣使用
  template: '<span>{{ message }}</span>'
})
// 建立根實例
new Vue({
  el: '#app'
})
</script>

嘗試一下 »

動態 Prop

相似於用 v-bind 綁定 HTML 特性到一個表達式，也能夠用 v-bind 動態綁定 props 的值到父組件的數據中。每當父組件的數據變化時，該變化也會傳導給子組件：

Prop 實例

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 註冊
Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 一樣也能夠在 vm 實例中像 "this.message" 這樣使用
  template: '<span>{{ message }}</span>'
})
// 建立根實例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父組件內容'
  }
})
</script>

嘗試一下 »

如下實例中將 v-bind 指令將 todo 傳到每個重複的組件中：

Prop 實例

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>
 
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

嘗試一下 »

注意: prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。

Prop 驗證

組件能夠爲 props 指定驗證要求。

prop 是一個對象而不是字符串數組時，它包含驗證要求：

Vue.component('example', {
  props: {
    // 基礎類型檢測 （`null` 意思是任何類型均可以）
    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 value > 10
      }
    }
  }
})

type 能夠是下面原生構造器：

• String
• Number
• Boolean
• Function
• Object
• Array

type 也能夠是一個自定義構造器，使用 instanceof 檢測。

---

自定義事件

父組件是使用 props 傳遞數據給子組件，但若是子組件要把數據傳遞回去，就須要使用自定義事件！

咱們能夠使用 v-on 綁定自定義事件, 每一個 Vue 實例都實現了事件接口(Events interface)，即：

• 使用 $on(eventName) 監聽事件
• 使用 $emit(eventName) 觸發事件

另外，父組件能夠在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

如下實例中子組件已經和它外部徹底解耦了。它所作的只是觸發一個父組件關心的內部事件。

實例

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

嘗試一下 »

若是你想在某個組件的根元素上監聽一個原生事件。能夠使用 .native 修飾 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

二、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

一、

http://www.runoob.com/vue2/vue-component.html

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。