使用vue.component封装全局组件的步骤

た入场券 2022-01-14 13:31 291阅读 0赞

1：写好组件

<template > 
            <div class="navbar navbar-default navbar-fixed-top scroll-me" >  
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="../assets/img/log.png" alt="" />
                    </a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right " style="padding:20px;">
                        <li><a href="#home-sec">首页</a></li>
                         <li><a href="#description-sec">户型展示</a></li>
                         <li><a href="#about-sec">关于本站</a></li>
                        <li><a href="#contact-sec">联系我</a></li>
                    </ul>
                </div>
               
            </div>
        </div>
         </template>
    <script>
     export default({
        data(){
        return {
        
        }
        },
        methods : {       
        },
       
     })
    </script>

2：然后在main.js里面

import header from '../src/components/Header.vue' //导入组件
    
    Vue.component('top-header', header)   //注册公共组件

3：使用组件

<top-header></top-header> //使用组件
    <div class="copyrights">Collect from <a href=""  title="网站模板">网站模板</a></div>

发表评论取消回复

表情：

评论列表（有 0 条评论，291人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA使用Protobuf封装和拆解步骤

代码已上传，[GitHub地址][GitHub] 1. 下载插件 `setting(mac为preferences)->plugins ->添加如下插件` !...

淡淡的烟草味﹌/ 2024年04月19日 09:22/ 0 赞/ 20 阅读

相关封装组件的作用

1. 功能模块化：当一个功能可以被抽象为一个独立的、可重用的模块时，可以将其封装成组件。这有助于将功能逻辑隔离并保持代码的整洁性。 2. UI元素重用：当你需要在多个地

淡淡的烟草味﹌/ 2024年03月23日 22:35/ 0 赞/ 10 阅读

相关 Vue + TS封装全局表格组件

在Vue项目中，我们经常需要使用表格来展示数据。为了提高代码复用性和开发效率，我们可以封装一个全局表格组件，方便在各个页面中使用。本文将介绍如何使用Vue和TypeScript

素颜马尾好姑娘i/ 2023年10月13日 08:32/ 0 赞/ 14 阅读

相关 Vue全局组件

1.写一个组件，然后在export default中给当前组件起一个名字 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

布满荆棘的人生/ 2023年01月13日 05:46/ 0 赞/ 124 阅读

相关 vue 动态组件+全局组件+keepAlive

vue 动态组件+全局组件+keepAlive 故心故心故心故心小故冲啊 -------------------- 文章目录 vue 动态组件+全局组件+

旧城等待，/ 2022年12月25日 14:51/ 0 赞/ 267 阅读

相关全局组件和局部组件

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

曾经终败给现在/ 2022年06月02日 10:23/ 0 赞/ 203 阅读

相关封装原生的JS，vue中封装全局使用的函数

function fun () \{ alert (this) //指向的是函数事件调用者 \} fun () 这里的this，指向的是window new f

我就是我/ 2022年05月16日 02:28/ 0 赞/ 215 阅读

相关使用vue.component封装全局组件的步骤

1：写好组件 <template > <div class="navbar navbar-default navbar-fixed-top

た入场券/ 2022年01月14日 13:31/ 0 赞/ 292 阅读

相关 Vue中Component全局组件和私有组件的定义和使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>私有组

谁践踏了优雅/ 2021年10月19日 07:16/ 0 赞/ 406 阅读

相关 vue - 搜索框组件的封装及使用

在写一个项目的时候，我们在多个页面会使用到搜索功能，这时我们一般都会选择直接写一个组件给多个页面一起使用，下面我给大家分享一下我的组件封装，如果不妥之处，请多多指教！

青旅半醒/ 2021年09月30日 14:22/ 0 赞/ 1030 阅读