框架学习【VUE】-组件复用 - 东南西北

东南西北

整理 思考 行动

框架学习【VUE】-组件复用

首页 编程 0 评

需求

项目需要以组件的方式进行开发,如何在page的组件里调用自己编写的vue组件呢?

页面结构如下

微信截图_20170818100355.png

编写组件button.vue -------------- ```html ```

index.vue调用


<template>
    <div>
        <xb></xb>
        <Button @click="toHello">Default</Button>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Table :columns="columns" :data="userlist"></Table>
    </div>
</template>
<script>
    import Util from '../../libs/util'
    import vButton from '../component/button'
    export default {
        components:{
          'xb':vButton
        },
        data(){
            return{
                columns:[
                    {
                        title:'序号',
                        key:'id'
                    } ,
                    {
                        title:'昵称',
                        key:'nickName'
                    }
                ],
                userlist:[],
                spinShow: true
            }
        },
        methods:{
            toHello(){
                this.$router.push({ path: 'hello' })
            }
        },
        mounted(){
            var data={'page':0,'size':15};
            Util.UserAPI.getUserList(data).then((res) => {
                this.userlist=res.data.data.list;
                this.spinShow=false;
            })
        }
    }
</script>

其中调用代码[js部分]

 components:{
          'xb':vButton
        },

其中调用代码[html部分]

<xb></xb>

框架学习【VUE】-组件与调用者之间的交互