Vue

Vue 动态组件(如tab栏)

联系站长 作者:web知道,未知,网络大神 来源:未知 2018-10-19 22:57 我要评论

Vue动态组件tab栏功能只要有四步...

动态组件 tab栏功能只要有四步
    一、HTML结构中,写出类似以下结构的代码
    <ul>
        <li><a href="javascript:;" @click='current="index"'>首页</a></li>
        <li><a href="javascript:;" @click='current="category"'>分类页面</a></li>
        <li><a href="javascript:;" @click='current="cart"'>购物车</a></li>
    </ul>
        
    二、创建三个父组件,分类别index,category和cart。
    var index = Vue.component('index',{
                template:'<div>首页</div>'
            })
    var category = Vue.component('category',{
                template:'<div>category</div>'
            })
    var cart = Vue.component('cart',{
                template:'<div>cart</div>'
            })
    
    三、在vue实例data中,加入current属性,用于接收点击事件current的赋值,为第四步做数据传输
    如:data: {
             current:'index'
             }
    
    四、在appDiv里加入component容器
    如:<component v-bind:is="current"></component>
    <!-- component 相当于一个容器,可以显示当前is属性所对应的组件的内容 。这个容器解析之后成为一个div -->



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评