自定义Vue的组件

Posted 2021-11-09 SmallCuteMonkey

文章目录

• • 1. 创建一个需要自定义的目录demo
  • 2. 创建一个需要自定义的文件.vue
  • 3. 编写文件中的内容template,script,style
  • 4. 一定要加上router/index.js 中的路由配置否则跳转不到

1. 创建一个需要自定义的目录demo

2. 创建一个需要自定义的文件.vue

3. 编写文件中的内容template,script,style

4. 一定要加上router/index.js 中的路由配置否则跳转不到

demo.vue文件：

<template>
    <section> <div>
        <el-button @click="test()" type="default">TEST</el-button></div>
        <div v-loading="pageLoading" class="page-container">
            <el-form :model="queryForm" ref="queryForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="queryForm.name" placeholder="input your username"></el-input>
                </el-form-item>
            </el-form>

        </div>
        </section>
        
</template>

<script>
import BtUi from 'components/basic-ui/bontal-base-ui.umd.min.js';
const { util, cacheUtil, axios, post, get, postFile} = BtUi.BtUtils;
window.Message =BtUi.Message;
window.MessageBox=BtUi.MessageBox;

// 这里是通过赋值将window对象中Message和MessageBox转换为BtUi中的message和messagebox


// 这里是vue本身组件开发的代码段。
export default {
    name: "demo",//当前组件名字
    mixins: [],
    props: {},
    created(){ //创建时的方法

    },
    mounted(){ //绑定元素的方法


    },
    computed:{ //这个 是全部加载完成的操作

    },
    data(){ //初始化数据的方法
       return {
           pageLoading: false,
           queryForm: {},
           rows: [],
           total: 0,
           pageNo: 1,
           pageSize: 10,

       }; //返回一个初始化的json数据格式
    },
    methods:{

        //  test:function(){
       test:function(){
           window.Message("侯治聪youare so bravo");
           alert("good job");
       }

    },
    filters:{


    },
    components: {


    },
    watch:{


    }

}
</script>

<style lang="" scoped>
    
</style>