vue component組件使用方法詳解

更新時間：2017年07月14日 11:30:05 作者：qq_18837459

這篇文章主要為大家詳細(xì)介紹了vue component組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

什么是組件

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

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

組件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標(biāo)簽下會受到一些限制。
比如一下代碼，在table標(biāo)簽下，組件是無效的。

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

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

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

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

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>

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。當(dāng)任意一個組件被點擊，所有組件的counter都會加一。

解決辦法如下

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談vuex的基本用法和mapaction傳值問題
今天小編就為大家分享一篇淺談vuex的基本用法和mapaction傳值問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue 3.0自定義指令的使用入門
在 Vue 的項目中，我們經(jīng)常會遇到 v-if、v-show、v-for 或 v-model 這些內(nèi)置指令，它們?yōu)槲覀兲峁┝瞬煌墓δ堋３耸褂眠@些內(nèi)置指令之外，Vue 也允許注冊自定義指令。接下來，將使用Vue 3官方文檔自定義指令章節(jié)中使用的示例，來一步步揭開自定義指令背后的秘密。
2021-05-05
Vue中使用import進(jìn)行路由懶加載的原理分析
這篇文章主要介紹了Vue中使用import進(jìn)行路由懶加載的原理分析。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解Vue方法與事件
本篇文章主要介紹了詳解Vue方法與事件。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
淺談VUE uni-app 開發(fā)環(huán)境
這篇文章主要介紹了uni-app的開發(fā)環(huán)境，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-10-10
vue3組件銷毀的具體實現(xiàn)
組件的銷毀意味著從 DOM 中移除該組件,并清除與之相關(guān)的所有事件監(jiān)聽器和子組件,本文主要介紹了vue3組件銷毀的具體實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
2024-08-08
進(jìn)入Hooks時代寫出高質(zhì)量react及vue組件詳解
這篇文章主要介紹了Hooks時代中如何寫出高質(zhì)量的react和vue組件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue3使用video-player實現(xiàn)視頻播放
video-player是一個基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實現(xiàn)視頻播放,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
vue 實現(xiàn)走馬燈效果
這篇文章主要介紹了vue 實現(xiàn)走馬燈效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
理理Vue細(xì)節(jié)（推薦）
這篇文章主要介紹了Vue細(xì)節(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04