vue components 動(dòng)態(tài)組件詳解
數(shù)組發(fā)生變化時(shí),動(dòng)態(tài)加載相應(yīng)數(shù)據(jù)
場(chǎng)景:點(diǎn)擊不同組件名稱(chēng),界面顯示相應(yīng)組件
步驟一:導(dǎo)入所需組件
步驟二:點(diǎn)擊 tab 選項(xiàng)卡,將對(duì)應(yīng)組件名添加進(jìn)數(shù)組
步驟三:使用動(dòng)態(tài)組件,:is 屬性綁定組件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例:監(jiān)聽(tīng)對(duì)象中屬性變化,深度監(jiān)聽(tīng)
<!-- DynamicComponent.vue --> <template> <section> <div v-for="(item, index) in componentData" :key="index"> <components :is='item.componentName' :params="item.content" /> </div> </section> </template> <script> import PageOne from './pageComponents/PageOne' import PageTwo from './pageComponents/PageTwo' import PageThree from './pageComponents/PageThree' export default{ name: 'DynamicComponent', components: { PageOne, PageTwo, PageThree }, data () { return { componentData: [ { componentName: 'PageOne', content: { title: '標(biāo)題一' } }, { componentName: 'PageTwo', content: { title: '標(biāo)題二' } } ] } } } </script>
<!-- PageOne --> <template> <section> {{content}} </section> </template> <script> export default{ name: 'PageOne', props: { params: { type: Object, default: function(){ return {} } } }, data () { return { content: this.params.title } }, watch: { params: { handler(newVal, oldVal){ this.content = newVal.title }, deep: true, immediate: true } } } </script>
<!-- PageTwo --> <template> <section> {{content}} </section> </template> <script> export default{ name: 'PageTwo', props: { params: { type: Object, default: function(){ return {} } } }, data () { return { content: this.params.title } }, watch: { params: { handler(newVal, oldVal){ this.content = newVal.title }, deep: true, immediate: true } } } </script>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
數(shù)組發(fā)生變化時(shí),動(dòng)態(tài)加載相應(yīng)數(shù)據(jù)
場(chǎng)景:點(diǎn)擊不同組件名稱(chēng),界面顯示相應(yīng)組件
步驟一:導(dǎo)入所需組件
步驟二:點(diǎn)擊 tab 選項(xiàng)卡,將對(duì)應(yīng)組件名添加進(jìn)數(shù)組
步驟三:使用動(dòng)態(tài)組件,:is 屬性綁定組件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例:監(jiān)聽(tīng)對(duì)象中屬性變化,深度監(jiān)聽(tīng)
<!-- DynamicComponent.vue --> <template> <section> <div v-for="(item, index) in componentData" :key="index"> <components :is='item.componentName' :params="item.content" /> </div> </section> </template> <script> import PageOne from './pageComponents/PageOne' import PageTwo from './pageComponents/PageTwo' import PageThree from './pageComponents/PageThree' export default{ name: 'DynamicComponent', components: { PageOne, PageTwo, PageThree }, data () { return { componentData: [ { componentName: 'PageOne', content: { title: '標(biāo)題一' } }, { componentName: 'PageTwo', content: { title: '標(biāo)題二' } } ] } } } </script>
<!-- PageOne --> <template> <section> {{content}} </section> </template> <script> export default{ name: 'PageOne', props: { params: { type: Object, default: function(){ return {} } } }, data () { return { content: this.params.title } }, watch: { params: { handler(newVal, oldVal){ this.content = newVal.title }, deep: true, immediate: true } } } </script>
<!-- PageTwo --> <template> <section> {{content}} </section> </template> <script> export default{ name: 'PageTwo', props: { params: { type: Object, default: function(){ return {} } } }, data () { return { content: this.params.title } }, watch: { params: { handler(newVal, oldVal){ this.content = newVal.title }, deep: true, immediate: true } } } </script>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue項(xiàng)目中input輸入框輸入不了值問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目中input輸入框輸入不了值問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Element-Plus?el-col、el-row快速布局及使用方法
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題
這篇文章主要介紹了vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例
今天小編就為大家分享一篇vue移動(dòng)端微信授權(quán)登錄插件封裝的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08