vue component組件使用方法詳解
什么是組件
按照慣例，引用Vue官網(wǎng)的一句話：
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。
組件component的注冊(cè)
全局組件:
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>
局部注冊(cè)：
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
DOM模板解析說(shuō)明
組件在某些HTML標(biāo)簽下會(huì)受到一些限制。
比如一下代碼，在table標(biāo)簽下，組件是無(wú)效的。
<table> <my-row>...</my-row> </table>
解決方法是，通過(guò)is屬性使用組件
<table> <tr is="my-row"></tr> </table>
應(yīng)當(dāng)注意，如果您使用來(lái)自以下來(lái)源之一的字符串模板，將不會(huì)受限
<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下有三個(gè)組件，每個(gè)組件共享一個(gè)counter。當(dāng)任意一個(gè)組件被點(diǎn)擊，所有組件的counter都會(huì)加一。
解決辦法如下
js
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return {counter:0}
}
})
new Vue({
el: '#example-2'
})
這樣每個(gè)組件生成后，都會(huì)有自己獨(dú)享的counter。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由，通過(guò)本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡(jiǎn)單，適合初學(xué)者,需要的朋友可以參考下2017-12-12
作為一個(gè)全棧開發(fā)人員,前端UI框架和網(wǎng)絡(luò)請(qǐng)求都得有基本的掌握,我以最簡(jiǎn)潔易懂的方式講解axios的使用和全局baseURL的配置2024-05-05
vue 父組件通過(guò)$refs獲取子組件的值和方法詳解
今天小編就為大家分享一篇vue 父組件通過(guò)$refs獲取子組件的值和方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue實(shí)現(xiàn)背景圖片鋪滿整個(gè)屏幕(適配所有機(jī)型)
在網(wǎng)頁(yè)設(shè)計(jì)中,背景全屏是一種常見的視覺效果,通過(guò)正確的CSS樣式設(shè)置,可以實(shí)現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過(guò)滾動(dòng)條查看剩余內(nèi)容,這種設(shè)計(jì)可以提升用戶的瀏覽體驗(yàn),使網(wǎng)頁(yè)看起來(lái)更加整潔和專業(yè)2024-10-10
vue項(xiàng)目百度地圖如何自定義標(biāo)注marker
這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟,項(xiàng)目中經(jīng)常有中英文切換的功能,接下來(lái)就簡(jiǎn)單實(shí)現(xiàn)以下這個(gè)功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考2023-11-11
vue引用外部JS并調(diào)用JS文件中的方法實(shí)例
我們?cè)谧鰒ue項(xiàng)目時(shí),經(jīng)常會(huì)需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開發(fā)畫流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說(shuō)為什么是難點(diǎn)，首先，它是依賴畫布canvas知識(shí)開發(fā)，這篇文章主要介紹了vue + gojs 實(shí)現(xiàn)拖拽流程圖,需要的朋友可以參考下2023-03-03