CRMEB v4 前端引用组件

2022-04-07 14:13 更新

引入外部模块

默认已经内置了许多模块,在一些业务中,可能还需要引入第三方的模块,以vue-grid-layout为例。

安装依赖

在终端安装vue-grid-layout

  1. $ npm install vue-grid-layout --save

使用

全局注册

src/main.js中注册并使用组件:

  1. // src/main.js
  2. // 导入组件
  3. import { GridLayout, GridItem } from 'vue-grid-layout';
  4. // 使用组件
  5. Vue.component('i-grid-layout', GridLayout);
  6. Vue.component('i-grid-item', GridItem);

全局注册后,任何地方都可以使用<i-grid-layout><i-grid-item>两个组件了。

局部注册

只在需要的页面或组件中注册:

  1. <template>
  2. <i-grid-layout>
  3. <i-grid-item />
  4. </i-grid-layout>
  5. </template>
  6. <script>
  7. import { GridLayout, GridItem } from 'vue-grid-layout';
  8. export default {
  9. components: { GridLayout, GridItem },
  10. data () {
  11. return {
  12. }
  13. }
  14. }
  15. </script>

自己封装组件

如果是自己封装的组件,可以放置在src/components目录内,使用方法不变。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号