自定义Vue 全局组件

自定义 vue 组件 三步骤。

第一步 定义组件

在 components 下创建自己的组件

<template>
    <div>
      <el-button  type="primary" @click="show">保存</el-button>
      <el-dialog title="数据提交" :visible.sync="isOk" width="500px" center>
          <div  slot="footer" class="dialog-footer">
              <el-button @click="isOk = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </div >
      </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isOk: false,
        };
    },
    props:{
        submit:Function,
    },
    methods: {
      show(){
        this.isOk = true
      }
    },

};
</script>

<style>
.el-dialog__header{
  background: white;
}
.el-dialog__title{
  color: black;
}
</style>

第二步 安装组件

在组件包下创建 index.js 文件 编写安装组件代码

import myCom from './SureBtn.vue';

const SureBtn={
    install:function(Vue){
        Vue.component('SureBtn',myCom)
    }
}
export default SureBtn;

第三步 导入组件

在main.js 文件中

//自定义全局组件
import SureBtn from './components/cdComponents/index';
Vue.use(SureBtn);

开始使用

在自己想要使用的 地方直接使用 SureBtn 标签

... ...
<SureBtn ref="myCom" :submit="submit"  ></SureBtn>
... ...

<script>
methds{
    submit() {
		alert("我是组件的回调方法")
   },
}
</script>