vue component組件使用方法詳解
更新時間：2017年07月14日 11:30:05 作者：qq_18837459
這篇文章主要為大家詳細介紹了vue 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。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue vuex vue-rouert后臺項目——權限路由（適合初學）
這篇文章主要介紹了vue vuex vue-rouert后臺項目——權限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關系，本版本非常簡單，適合初學者,需要的朋友可以參考下2017-12-12
作為一個全棧開發(fā)人員,前端UI框架和網(wǎng)絡請求都得有基本的掌握,我以最簡潔易懂的方式講解axios的使用和全局baseURL的配置2024-05-05
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
在網(wǎng)頁設計中,背景全屏是一種常見的視覺效果,通過正確的CSS樣式設置,可以實現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過滾動條查看剩余內(nèi)容,這種設計可以提升用戶的瀏覽體驗,使網(wǎng)頁看起來更加整潔和專業(yè)2024-10-10
這篇文章主要介紹了vue項目百度地圖如何自定義標注marker問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+elementUI顯示表格指定列合計數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關于vue項目實現(xiàn)中英文切換的詳細步驟,項目中經(jīng)常有中英文切換的功能,接下來就簡單實現(xiàn)以下這個功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考2023-11-11
我們在做vue項目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關于vue引用外部JS并調(diào)用JS文件中的方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
最近一段時間在研究go.js,它是一款前端開發(fā)畫流程圖的一個插件，也是一個難點，要說為什么是難點，首先，它是依賴畫布canvas知識開發(fā)，這篇文章主要介紹了vue + gojs 實現(xiàn)拖拽流程圖,需要的朋友可以參考下2023-03-03