vue.js - vue， 通过父组件的属性值，选择性渲染不同的子组件

问题描述

问 题

如通过父组件属性值， 选择性渲染不同的子组件

    //父组件
    var cmsParent = Vue.extend({
        props:['item','platform'],
        template: ''
    })

    // 子组件 ad(广告)
    var cmsAd = Vue.extend({
        props:['item','platform'],
        template: '<div>{{item.category}},{{platform}}</div>'
    })

    // 子组件 - goods(商品)
    var cmsGoods = Vue.extend({
        props:['item','platform'],
        template: '<div>{{item.category}},{{platform}}</div>'
    })

    // 子组件 - nav(导航)
    var cmsNav = Vue.extend({
        props:['item','platform'],
        template: '<div>{{item.category}},{{platform}}</div>'
    })


    // 注册组件
    Vue.component('cms-parent', cmsParent);
    Vue.component('cms-ad', cmsAd);
    Vue.component('cms-goods', cmsGoods);
    Vue.component('cms-nav', cmsNav);

item.category 有三种值，ad,goods,nav。 想从这个值来加载对应子组件。

解决方案

你应该用动态组件

这篇关于vue.js - vue， 通过父组件的属性值，选择性渲染不同的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！