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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue 全局组件封装

vue中写好一个组件功能 <template> <div id="app"> <div class="popwin">

快来打我*/ 2023年05月30日 06:12/ 0 赞/ 15 阅读

相关 Vue.js note6（组件component的使用&全局组件&局部组件）

1、什么是组件我们知道，vue的核心是数据驱动与组件化，所以组件是非常重要的。那么组件是什么呢？组件的概念：组件即自定义控件，是Vue.js最强大的功能之一组

浅浅的花香味﹌/ 2023年02月27日 12:08/ 0 赞/ 17 阅读

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

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

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

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

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

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