vue components 动态组件
taoqidejingling 人气:3数组发生变化时,动态加载相应数据
场景:点击不同组件名称,界面显示相应组件
步骤一:导入所需组件
步骤二:点击 tab 选项卡,将对应组件名添加进数组
步骤三:使用动态组件,:is 属性绑定组件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例:监听对象中属性变化,深度监听
<!-- 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: '标题一' } }, { componentName: 'PageTwo', content: { title: '标题二' } } ] } } } </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>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
数组发生变化时,动态加载相应数据
场景:点击不同组件名称,界面显示相应组件
步骤一:导入所需组件
步骤二:点击 tab 选项卡,将对应组件名添加进数组
步骤三:使用动态组件,:is 属性绑定组件名
<div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div>
案例:监听对象中属性变化,深度监听
<!-- 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: '标题一' } }, { componentName: 'PageTwo', content: { title: '标题二' } } ] } } } </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>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
加载全部内容