淺析vue component 組件使用
component 使用
component的注冊(cè)
1.全局注冊(cè)
使用用Vue.component('componentName',{template:'<div class="tem1">hello world</div>'})在初始化實(shí)例之前。
componentName自定義名稱
在實(shí)例聲明的作用域下中使用<componentName></componentName> 成功渲染效果就是 '<div class="tem1">hello world</div>
Vue.component('my-component',{
template:'<div class="tem1">hello world</div>'
}
組件中的數(shù)據(jù)使用
component不能使用實(shí)例的data ，但是可以在component 使用data 聲明變量，data的使用只能使用函數(shù)形式
Vue.component('my-component',{
template:'<div class="tem1">hello world {{comdata}}</div>',
data:function(){return {comdata:'hehe'}}
});
2.局部主持
在實(shí)例化的new Vue 中設(shè)置components
var app=new Vue({
el:'#app',
components:{'example':{template:'<div>children template</div>'}}
})
組件中的數(shù)據(jù)使用
var app=new Vue({
el:'#app',
data:{num:220},
components:{
'example':{
template:'<div>children template{{mydata}}</div>',
data:function(){return {mydata:' mydata=data'};}
}
}
})
注意：組件不能使用實(shí)例的data:{num:220}的參數(shù)會(huì)報(bào)錯(cuò)
組件中同樣支持methods、computed等其他屬性 不會(huì)沖突保持相對(duì)的獨(dú)立
這時(shí)候就必須考慮不同組件的數(shù)據(jù)通信問題
vue js總結(jié)來說通過props down events up 來傳輸數(shù)據(jù)
給父級(jí)調(diào)用數(shù)據(jù)使用props聲明,給子集調(diào)用使用events來聲明
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁并修改title方法
今天小編就為大家分享一篇vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁并修改title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue報(bào)錯(cuò)Failed to execute 'appendChild&apos
這篇文章主要為大家介紹了vue報(bào)錯(cuò)Failed to execute 'appendChild' on 'Node'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
`package.json`是Node.js和npm項(xiàng)目的核心配置文件,定義了項(xiàng)目的元數(shù)據(jù)和依賴項(xiàng),在Vue項(xiàng)目中,它管理依賴、提供腳本命令、存儲(chǔ)項(xiàng)目信息,并通過語義化版本控制確保項(xiàng)目穩(wěn)定2025-01-01
vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue3 獲取元素高度不準(zhǔn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue組件設(shè)計(jì)-Sticky布局,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
vue實(shí)現(xiàn)路由鑒權(quán)和不同用戶登錄
這篇文章主要為大家詳細(xì)介紹了vue中實(shí)現(xiàn)路由鑒權(quán)和不同用戶登錄的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能,具有基本四則運(yùn)算計(jì)算器以及科學(xué)計(jì)算器的功能,可實(shí)現(xiàn)開方、乘方、三角函數(shù)以及公式運(yùn)算等功能,需要的朋友可以參考下2018-07-07