vue.js中component的使用示例

這篇文章主要介紹vue.js中component的使用示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue.js中component的使用方法：1、擴展HTML元素，封裝可重用的代碼；2、組件是自定義元素，【Vue.js】的編譯器為它添加特殊功能；3、組件也可以是原生HTML元素的形式，以is特性擴展。

vue.js中component的使用方法：

什么是組件

按照慣例，引用Vue官網(wǎng)的一句話：

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。

組件component的注冊

全局組件:

Vue.component('todo-item',{
  props:['grocery'],
  template:'<li>{{grocery.text}}</li>'
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})

<div id="app7">
  <ol>
    <todo-item
      v-for="grocery in groceryList"
      v-bind:grocery="grocery"
      v-bind:key="grocery.id">
    </todo-item>
  </ol>
</div>

局部注冊：

var Child = {
 template: '<div>A custom component!</div>'
}
new Vue({
 // ...
 components: {
  // <my-component> 將只在父模板可用
  'my-component': Child
 }
})

DOM模板解析說明

組件在某些HTML標簽下會受到一些限制。

比如一下代碼，在table標簽下，組件是無效的。

<table>
 <my-row>...</my-row>
</table>

解決方法是，通過is屬性使用組件

<table>
 <tr is="my-row"></tr>
</table>

應當注意，如果您使用來自以下來源之一的字符串模板，將不會受限

<script type="text/x-template">

JavaScript內(nèi)聯(lián)模版字符串

.vue組件

data使用函數(shù)，避免多組件互相影響

html

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>

js

var data = { counter: 0 }
Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function () {
  return data
 }
})
new Vue({
 el: '#example-2'
})

如上，div下有三個組件，每個組件共享一個counter。當任意一個組件被點擊，所有組件的counter都會加一。

解決辦法如下

js

Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function () {
  return {counter:0}
 }
})
new Vue({
 el: '#example-2'
})

這樣每個組件生成后，都會有自己獨享的counter。

以上是“vue.js中component的使用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！