首页 > vue, 通过父组件的属性值,选择性渲染不同的子组件

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。 想从这个值来加载对应子组件。


你应该用动态组件

【热门文章】
【热门文章】