淺析vue component 組件使用
component 使用
component的注冊
1.全局注冊
使用用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ù)會報錯
組件中同樣支持methods、computed等其他屬性 不會沖突保持相對的獨(dú)立
這時候就必須考慮不同組件的數(shù)據(jù)通信問題
vue js總結(jié)來說通過props down events up 來傳輸數(shù)據(jù)
給父級調(diào)用數(shù)據(jù)使用props聲明,給子集調(diào)用使用events來聲明
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能
這篇文章主要介紹了Vue mock.js模擬數(shù)據(jù)實(shí)現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能，mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨(dú)立開發(fā)。我們可以使用真實(shí)的url，mockjs可以攔截ajax請求，返回設(shè)定好的數(shù)據(jù)2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)消息向上無縫滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue頁面加載完成后如何自動加載自定義函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue路由history模式頁面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue3 emit is not a function問題及解決
這篇文章主要介紹了vue3 emit is not a function問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
解決element ui el-row el-col里面高度不一致問題
這篇文章主要介紹了解決element ui el-row el-col里面高度不一致問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義下拉菜單功能,文章先通過實(shí)例代碼給大家介紹，后面對用到的知識點(diǎn)總結(jié)，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡單計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue?是如何將一份模板轉(zhuǎn)換為真實(shí)的?DOM?節(jié)點(diǎn)的,又是如何高效地更新這些節(jié)點(diǎn)的呢,這些都離不開虛擬dom這個概念,下面我們就來了解下虛擬dom這個概念以及它是什么吧2024-01-01