| 数组发生变化时，动态加载相应数据 场景：点击不同组件名称，界面显示相应组件 步骤一：导入所需组件 步骤二：点击 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>
总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容！ 数组发生变化时，动态加载相应数据 场景：点击不同组件名称，界面显示相应组件 步骤一：导入所需组件 步骤二：点击 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>总结本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注51zixue.net的更多内容！
下载地址:
JS中的四种数据类型判断方法
JS 箭头函数的this指向详解 |
