vue 全局引用公共的组件以及公共的JS文件问题
全局引用公共的组件及公共的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 /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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,下面小编给大家带来了实例代码,需要的朋友参考下吧2018-10-10Vue使用ElemenUI对table的指定列进行合算的方法
这篇文章主要介绍了Vue使用ElemenUI对table的指定列进行合算的方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-03-03Vue + Element UI 实现权限管理系统之菜单功能实现代码
菜单管理是一个对菜单树结构的增删改查操作,这篇文章主要介绍了Vue + Element UI 实现权限管理系统之菜单功能实现代码,需要的朋友可以参考下2022-02-02Vue.js基础之监听子组件事件v-on及绑定数据v-model学习
这篇文章主要为大家介绍了Vue.js基础之监听子组件事件v-on及绑定数据v-model学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-06-06
最新评论