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

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

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

相关阅读

相关封装组件的作用

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

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

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

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

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

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

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

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

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

本文介绍了如何使用Vue和TypeScript封装一个全局搜索组件。该组件可以方便地在Vue项目中使用，帮助用户快速定位所需信息。组件功能该全局搜索组件具有以下功能

Dear 丶/ 2023年10月13日 08:32/ 0 赞/ 28 阅读

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

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

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

相关 Vue + TS封装全局分页组件

在Vue3项目中，我们常常会用到分页组件。为了方便复用和统一样式，我们可以封装一个全局的分页组件。实现思路 1. 定义一个Pagination组件，包含分页逻辑和样

素颜马尾好姑娘i/ 2023年10月13日 05:29/ 0 赞/ 30 阅读

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

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

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

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

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

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

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

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