快捷導(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項(xiàng)目中引用本地字體的完整指南
在前端開(kāi)發(fā)中,我們經(jīng)常會(huì)遇到需要使用自定義字體的場(chǎng)景,比如品牌字體、設(shè)計(jì)稿還原等,在 Vue 項(xiàng)目中引入本地字體其實(shí)非常簡(jiǎn)單,本文將一步步帶你完整實(shí)現(xiàn),需要的朋友可以參考下
2026-03-03
如何用vite動(dòng)態(tài)導(dǎo)入vue的路由配置詳解
這篇文章主要介紹了如何用vite動(dòng)態(tài)導(dǎo)入vue的路由配置的相關(guān)資料,動(dòng)態(tài)導(dǎo)入路由模仿了uniapp的頁(yè)面配置文件結(jié)構(gòu),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
Vue.js表單控件實(shí)踐
這篇文章主要為大家詳細(xì)介紹了Vue.js表單控件實(shí)踐,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時(shí),可以通過(guò)suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動(dòng)可能會(huì)導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認(rèn)行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶(hù)體驗(yàn)
2024-09-09
Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-10-10
vue項(xiàng)目之頁(yè)面class不生效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目之頁(yè)面class不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼
本篇文章主要介紹了利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Vue2.0父子組件傳遞函數(shù)的教程詳解
這篇文章主要介紹了Vue2.0父子組件傳遞函數(shù)的教程詳解,需要的朋友可以參考下
2017-10-10
vue-cli構(gòu)建項(xiàng)目下使用微信分享功能
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目下使用微信分享功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03