vue 组建自己的组件库并引入全局组件的实现

vue tytrock ⋅ 于 2020-03-07 12:40:58 ⋅ 661 阅读

1、建立自己的组件库

例如在components里创建一个目录为mycomponents,里面放入自己的vue组件,如其中一个组件为MyTest.vue,文件内容如下:

<template>
    <div>
        这是一个测试组件,内容为{{ content }}
    </div>
</template>

<script>
export default {
    props:['content']
}
</script>


2、注册组件库

在自己创建的组件库文件夹mycomponents里新建一个index.js,用于注册自己需要设置为全局组件的组件,如:

import MyTest from './MyTest'//引入刚创建的组件
import OtherCom from './OtherCom'//引入其他组件,可多个
const MyComponent = {
    install: function(Vue) {
        // 注册并获取组件,然后在main.js中引用,在Vue.use()就可以了
        Vue.component('TytMyTest', MyTest) //第一个参数为注册组件的名称,在页面里就可以直接使用,如本里可以直接使用<tyt-my-test></tyt-my-test>,第二个参数为上面import组件的名称
        Vue.component('TytOther', OtherCom)
    }
}
export default MyComponent


3、在main.js里引入

import mycomponent from '@/components/mycomponents/index' //这里可以不加最后的index,vue会自动找到
Vue.use(mycomponent);


4、使用组件

至此,页面里就可以直接使用事先定义好的组件名称来使用自定义组件了

<tyt-my-test></tyt-my-test>
<tyt-other></tyt-other>


参考:https://www.cnblogs.com/lsc-boke/p/11007879.html

本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter