vue如何编写组件可以通过Vue.use()使用

一般平时用别人的组件时都是通过import引入然后Vue.use()来使用,那么如何让我们写的组件也可以用这种方式使用呢?

1.首先新建一个文件夹例如:Home,然后在该文件中新建两个文件Home.vue和index.js

文件

2.在Home.vue中和往常一样如:

<template>
    <div id="Home">
        <h1>加上点加鸡蛋</h1>
    </div>
</template>
<script>
    export default{
        name:"Home"
    }
</script>

3.接下来是index.js的编写(主要)

import Home from './Home.vue'
// install方法必须有
export default{
    install:function(Vue) {
        Vue.component('Home',Home);
    }
}

4.接下来就可以在main.js中美美的引入你的组件了

import Home from './components/Home'
Vue.use(Home)

5.使用(在App.vue中)

<div id="app">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
    <Home></Home>
</div>

6.效果展示

效果展示

个人博客https://myml666.github.io

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 7,082评论 0赞 16
  • ____见此图有感 在风中伫立,我凝望着 这个王朝的孤寂 颠沛,不会使人更加安宁 在流离中,尊严已经濒临死...
    俞壹阅读 558评论 2赞 4
  • 当一个人生活枯燥的时候,他忘了用心体会是一种习惯。 当一个人人生乏味的时候,他忘了培养幽默是一种习惯。 当一个人体...
    16aa5fab5f62阅读 195评论 0赞 0
  • 《欧美》01 V字仇杀队 阿甘正传 傲慢与偏见 ...
    feng_Zi阅读 360评论 0赞 2
  • 一、我只是在写作,而非创作。其实写作都算不上,大多时候,只能算记录。记录心情上的起伏,记录喜怒哀乐。 二、我是真的...
    李晓欣阅读 362评论 34赞 38

友情链接更多精彩内容