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

た入场券 2022-01-14 13:31 345阅读 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 条评论，345人围观）

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

相关阅读

相关封装组件的作用

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

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

相关 Vue3+element-ui + TS封装全局分页组件

本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。环境依赖在开始之前，你需要安装以下环境： Vue3 ele

缺乏、安全感/ 2023年10月13日 11:57/ 0 赞/ 10 阅读

相关 Vue + element-ui + TS封装全局搜索组件

本文介绍了如何在Vue项目中使用element-ui和TypeScript封装一个全局搜索组件。依赖安装首先需要安装Vue、element-ui和TypeScrip

Bertha 。/ 2023年10月13日 10:11/ 0 赞/ 4 阅读

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

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

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

相关封装常见的组件

目录 1.手写分页组件效果图： 2.手写轮播图组件功能: 主要逻辑： 3.手写提示框组件效果：思路：组件：转换成函数调用使用： ---

古城微笑少年丶/ 2023年10月01日 07:38/ 0 赞/ 2 阅读

相关 vue自定义封装全局组件与使用

以前只知道第1种局部组件。每个页面都需要引入，注册，然后才能像2一样使用！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

雨点打透心脏的1/2处/ 2023年06月13日 09:37/ 0 赞/ 31 阅读

相关 uni-app如何使用全局组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

爱被打了一巴掌/ 2023年03月01日 09:42/ 0 赞/ 1 阅读

相关全局组件和局部组件

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

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

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

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

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

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

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

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