您现在的位置是：网站首页> 编程资料编程资料

vue 全局引用公共的组件以及公共的JS文件问题_vue.js_

2023-05-24 330人已围观

简介 vue 全局引用公共的组件以及公共的JS文件问题_vue.js_

全局引用公共的组件及公共的JS文件

1. 创建一个公共的目录 timeline ，里面包含 timeline.js 和 timeline.vue 文件，timeline.vue 用来写公共的页面，timeline.js 用来导出这个组件。

在这里插入图片描述

在这里插入图片描述

timeline.vue 文件内容如下

timeline.js 文件内容如下

import timelineData from './timeline.vue'; const timeline = { install: (Vue) => { // 注册并获取组件，然后在 main.js 中引入，并 Vue.use()挂载 Vue.component('timeline', timelineData) } }; export default timeline;

2. 在 main.js 中引入公共的文件并挂载到Vue中

... // 引入timeline import timeline from './timeline/timeline.js'; Vue.use(timeline); ...

3. 在需要用到 timeline 的组件文件中直接使用即可

全局引入自定义组件问题

文件目录

1. 书写组件

2. 暴露install()方法

// index.js import HButton from './index.vue'; HButton.install=function(Vue){ Vue.component('HButton',HButton) // (组件名称，对应组件) } export default HButton;

3. 全局注册

// main.js // @ is an alias to /src import HButton from '@/components/Btn/index' Vue.use(HButton)

4. 使用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：vue2中provide/inject的使用与响应式传值详解_vue.js_

下一篇：实现一个VUE响应式属性装饰器详析_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网