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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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

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

在这里插入图片描述

timeline.vue 文件内容如下

<template>
  <div>页面展示内容</div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="less" scoped>
</style>

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 的组件文件中直接使用即可

<template>
  <div>
  	// 页面中直接使用即可
	<timeline></timeline>
  </div>
</template>

全局引入自定义组件问题

文件目录

1. 书写组件

<!-- index.vue -->
<template>
  <button class="h-button" :type="type">
    <slot></slot>
  </button>
</template>
<script>
export default {
  props:{
    type:{
      type:String,
      default:'button'
    }
  },
  data(){
    return{
    }
  }
}
</script>

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 /class="lazy" data-src
import HButton from '@/components/Btn/index'
Vue.use(HButton)

4. 使用

<!-- Home.vue 使用 -->
<template>
  <div class="home">
    <h-button>组件使用</h-button>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
};
</script>

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉