VUE 自有组件注册与使用

主要代码

Vue.component(参数一是你自己命名的组件名, 参数二是这个组件的模板代码);

步骤

第一步：component下面封装一个组件

此文件路径 @/component/top/index.js

// 注册组件
import Lang from "./langselect";
import Icon from "./svgicon";
import Crumb from "./breadcrumb";
import Sopan from "./scrollpane";
import Sobar from "./scrollbar";
import Pop from "./pop";
import Carousel from "./carousel";
// 布局组件
import Navbar from "./layout/Navbar";
import Sidebar from "./layout/Sidebar/index";
import Main from "./layout/AppMain";
import Top from "./top/index";
import nodeWrap from "./flowNode/nodeWrap";
import addNode from "./flowNode/addNode";
// 表单组件
import Fitem from "./fitem";
// 导出组件
import ExportFile from "./exportFile";
// 直接导出组件
import ExportFileBefore from "./exportFile/indexBefore";

import FormatMoney from "./money";
import Supplier from "./supplier";
import wangEditor from "./wangEditor/wangEditor";

export default {
  Lang,
  Icon,
  Crumb,
  Sopan,
  Sobar,
  Pop,
  Carousel,
  Navbar,
  Sidebar,
  Main,
  Top,
  ExportFile,
  FormatMoney,
  Supplier,
  Fitem,
  nodeWrap,
  addNode,
  wangEditor,
  ExportFileBefore,
};

 

第二步：将这个文件导出

文件路径 @/component/index.js

// 注册组件
// 布局组件
import Top from "./top/index";
// 表单组件
// 导出组件

export default {
  //Lang,
  Top
};

第三步：全局注册

在main.js里面

import components from "./components/index.js";

// 全局注册自有组件
Object.keys(components).forEach(key => {
  if (key == "nodeWrap" || key == "addNode") {
    Vue.component(`${key}`, components[key]);
  } else {
    const name = key.replace(/(\w)/, v => v.toUpperCase()); // 首字母大写
    Vue.component(`v${name}`, components[key]);
  }
});

这样在使用的时候就可以用 v-top使用啦 如下：

    <v-top :title="$i18nAdapt('route.resource')">
      <template slot="r">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click.native="handleCreate"
          >添加一级菜单</el-button
        >
      </template>
    </v-top>