vue components 動態(tài)組件詳解
數(shù)組發(fā)生變化時,動態(tài)加載相應(yīng)數(shù)據(jù)
場景:點擊不同組件名稱,界面顯示相應(yīng)組件
步驟一:導(dǎo)入所需組件
步驟二:點擊 tab 選項卡,將對應(yīng)組件名添加進(jìn)數(shù)組
步驟三:使用動態(tài)組件,:is 屬性綁定組件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例:監(jiān)聽對象中屬性變化,深度監(jiān)聽
<!-- 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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
數(shù)組發(fā)生變化時,動態(tài)加載相應(yīng)數(shù)據(jù)
場景:點擊不同組件名稱,界面顯示相應(yīng)組件
步驟一:導(dǎo)入所需組件
步驟二:點擊 tab 選項卡,將對應(yīng)組件名添加進(jìn)數(shù)組
步驟三:使用動態(tài)組件,:is 屬性綁定組件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例:監(jiān)聽對象中屬性變化,深度監(jiān)聽
<!-- 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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Element-Plus?el-col、el-row快速布局及使用方法
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題
這篇文章主要介紹了vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04