Vue中注冊全局組件的三種方式
更新時間：2023年11月17日 10:29:06 作者：Kratial
這篇文章主要介紹了Vue中注冊全局組件的三種方式,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
1.方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue組件的注冊</title>
<script src="../vue.js"></script>
</head>
<body>
<template id="Mydemo">
<h1>Hello Time</h1>
</template>
<div id="app">
<account></account>
</div>
<script>
//注冊全局組件
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組件的注冊</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<say-hello></say-hello>
</div>
<script>
//注冊全局組件
Vue.component('say-hello',{
template:"<h2>Hello everyone</h2>",
});
//根實例
new Vue({
el:"#app",
})
</script>
</body>
</html>3.方式三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue組件的注冊</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);
//根實例
new Vue({
el:"#app",
})
</script>
</body>
</html>到此這篇關(guān)于Vue中注冊全局組件的三種方式的文章就介紹到這了,更多相關(guān)vue注冊全局組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue實現(xiàn)瀏覽器打印功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
本篇文章主要介紹了手把手教你vue-cli單頁到多頁應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue-cli項目使用vue-picture-preview圖片預(yù)覽組件方式
這篇文章主要介紹了vue-cli項目使用vue-picture-preview圖片預(yù)覽組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
下面小編就為大家分享一篇vue實現(xiàn)tab切換外加樣式切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要解決Vue項目使用History模式發(fā)布到服務(wù)器Nginx上刷新頁面404問題。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦)
這篇文章主要介紹了vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動操作的函數(shù),結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
組件化開發(fā)能大幅提高應(yīng)用的開發(fā)效率、測試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue移動端模態(tài)框(可傳參)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue入門學(xué)習(xí)筆記【基本概念、對象、過濾器、指令等】
這篇文章主要介紹了Vue入門學(xué)習(xí)筆記,結(jié)合實例形式分析了vue.js的基本概念、對象、過濾器、指令等的相關(guān)原理與簡單使用方法,需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個項目要用到地圖，因為微信小程序用的也是百度地圖，所以想著網(wǎng)頁端也用百度地圖,需要的朋友可以參考下2023-07-07