快捷導(dǎo)航

Vue中注冊(cè)全局組件的三種方式

更新時(shí)間：2023年11月17日 10:29:06 作者：Kratial

這篇文章主要介紹了Vue中注冊(cè)全局組件的三種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue組件的注冊(cè)</title>
    <script src="../vue.js"></script>
</head>
<body>
<template id="Mydemo">
    <h1>Hello Time</h1>
</template>
<div id="app">
    <account></account>
</div>
<script>
//注冊(cè)全局組件
    Vue.component('account',{
        template:"#Mydemo",
    })
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>

2.方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue組件的注冊(cè)</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <say-hello></say-hello>
</div>
<script>
  //注冊(cè)全局組件
    Vue.component('say-hello',{
        template:"<h2>Hello everyone</h2>",
    });
   //根實(shí)例
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>

3.方式三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue組件的注冊(cè)</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
  <my-list></my-list>
</div>
<script>
    var list=Vue.extend({
        template:'<h1>this is a list</h1>',
    });
    Vue.component("my-list",list);
    //根實(shí)例
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>

到此這篇關(guān)于Vue中注冊(cè)全局組件的三種方式的文章就介紹到這了,更多相關(guān)vue注冊(cè)全局組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)瀏覽器打印功能的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)瀏覽器打印功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法
本篇文章主要介紹了手把手教你vue-cli單頁(yè)到多頁(yè)應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式
這篇文章主要介紹了vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue實(shí)現(xiàn)tab切換外加樣式切換方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)tab切換外加樣式切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Vue項(xiàng)目History模式404問(wèn)題解決方法
本文主要解決Vue項(xiàng)目使用History模式發(fā)布到服務(wù)器Nginx上刷新頁(yè)面404問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁(yè)面到指定位置的功能(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁(yè)面到指定位置的功能(推薦),步驟一是是通過(guò)獲取不同板塊的滾輪高度,步驟二通過(guò)編寫(xiě)執(zhí)行滾動(dòng)操作的函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
通用vue組件化展示列表數(shù)據(jù)實(shí)例詳解
組件化開(kāi)發(fā)能大幅提高應(yīng)用的開(kāi)發(fā)效率、測(cè)試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue移動(dòng)端模態(tài)框(可傳參)的實(shí)現(xiàn)
這篇文章主要介紹了vue移動(dòng)端模態(tài)框(可傳參)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue入門(mén)學(xué)習(xí)筆記【基本概念、對(duì)象、過(guò)濾器、指令等】
這篇文章主要介紹了Vue入門(mén)學(xué)習(xí)筆記,結(jié)合實(shí)例形式分析了vue.js的基本概念、對(duì)象、過(guò)濾器、指令等的相關(guān)原理與簡(jiǎn)單使用方法,需要的朋友可以參考下
2019-04-04
vue3使用百度地圖超詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個(gè)項(xiàng)目要用到地圖，因?yàn)槲⑿判〕绦蛴玫囊彩前俣鹊貓D，所以想著網(wǎng)頁(yè)端也用百度地圖,需要的朋友可以參考下
2023-07-07