K先生个人博客

当前位置:首页 > 爱技术 > 正文

K先生:vue怎么注册全局组件以及怎么使用

最近发现vue的坑越来越多,为了让更多的人少栽跟头,所以以后遇到问题,K先生我就多多记录吧。就像有句话说的,“我踩过的坑,你可以跳过去”,今天这个坑就是vue怎么注册全局组件以及怎么使用,说句实话,K先生这个坑花了好几个小时,现在回头一看,真简单的问题,但当时真的是差点把头发抓光,,,

我们先来看看vue官方给出的全局组件的注册方法:

image.png

不晓得,你们有没有看懂,但毫不掩饰的说,博主当时看的一脸懵逼,可能是博主太菜了,最后几经折腾,博主整理了一下这个注册全局组件方法:

第一步:创建要注册的全局组件,比如:Header.vue

<template>
  <div class="header">
	我是header
  </div>
</template>

<script>
  export default {
    name: "header",
  }
</script>

<style scoped>
</style>

第二步:在main.js中全局注册到vue中

import Header from '@/components/Header.vue'
Vue.component("Header", Header)

PS:上面那个路径要根据自己的实际情况写哈。

第三步:使用注册的全局组件

<Header />

现在你可以在其它任意组件中可以直接使用这个组件了,不需要再导入了。

最后,你感觉vue的教程对新手友好吗?为什么博主有时候会看的一脸懵逼。

作者K先生本文地址http://www.gold404.cn/

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

    暂时还没有评论哦!