vue.js全局組件和局部組件示例代碼
更新時(shí)間：2022年12月10日 10:18:13 作者：胖頭小奶虎
組件是Vue.js的最核心的功能,所謂的組件化就是把頁(yè)面拆分成多個(gè)組件,每個(gè)組件單獨(dú)使用CSS,JS,模板,圖片等資源進(jìn)行開(kāi)發(fā)與維護(hù),然后在制作網(wǎng)頁(yè)的時(shí)候根據(jù)需要調(diào)用相關(guān)的組件,這篇文章主要給大家介紹了關(guān)于vue.js全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下
全局組件和局部組件
全局組件的定義的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>全局組件</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
</div>
<script type="text/javascript">
// 創(chuàng)建組件構(gòu)造器
const cpnC = Vue.extend({
template:`
<div>
<h2>我是標(biāo)題</h2>
<p>我是內(nèi)容：小奶虎</p>
</div>
`
})
//注冊(cè)組件(全局組件：意味著可以在多個(gè)Vue的實(shí)例下面使用)
Vue.component('cpn',cpnC);
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>
局部組件的定義的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>局部組件</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
</div>
<script type="text/javascript">
// 創(chuàng)建組件構(gòu)造器
const cpnC = Vue.extend({
template:`
<div>
<h2>我是標(biāo)題</h2>
<p>我是內(nèi)容：小奶虎</p>
</div>
`
})
//注冊(cè)組件(全局組件：意味著可以在多個(gè)Vue的實(shí)例下面使用)
// Vue.component('cpn',cpnC);
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
},
components:{
//cpn：使用組件時(shí)的標(biāo)簽名
//此時(shí)注冊(cè)的是局部組件
cpn:cpnC
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>
附：自定義全局組件
全局組件用到的是 Vue.component(tagName,option)，tagName是自定義的組件名稱(chēng),option是組件構(gòu)造器。具體使用方法如下：
在main.js中設(shè)置：
Vue.component('my-component', {
template: '<button v-on:click="clickShow">切換<h1 v-show="show">全局組件的學(xué)習(xí)</h1></button>',
data () {
return {
show: true
}
},
methods:{
clickShow(){
this.show = !this.show
}
}
})
在組件中直接引用：
<template>
<div>
<my-component ></my-component>
</div>
</template>
渲染結(jié)果為：
總結(jié)
到此這篇關(guān)于vue.js全局組件和局部組件的文章就介紹到這了,更多相關(guān)vue.js全局組件和局部組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料，以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
vue3(optionApi)使用Element Plus庫(kù)沒(méi)有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫(kù)沒(méi)有效果的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用vue實(shí)現(xiàn)pdf預(yù)覽功能的方法
許多朋友想要材料上傳之后點(diǎn)擊預(yù)覽實(shí)現(xiàn)在瀏覽器上預(yù)覽的效果,所以本文將給大家介紹如何使用vue實(shí)現(xiàn)pdf預(yù)覽功能,文中有實(shí)現(xiàn)代碼,有需要的朋友可以參考閱讀下2023-08-08
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue封裝swiper代碼實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
vue2.0如何動(dòng)態(tài)綁定img的src屬性(三元運(yùn)算)
這篇文章主要介紹了vue2.0如何動(dòng)態(tài)綁定img的src屬性(三元運(yùn)算)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時(shí)開(kāi)發(fā)的時(shí)候,后端接口數(shù)據(jù)沒(méi)有出來(lái),前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來(lái)為大家詳細(xì)介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)
這篇文章主要為大家介紹了VUE2響應(yīng)式原理使用Object.defineProperty缺點(diǎn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
element-ui?table表格底部合計(jì)自定義配置過(guò)程
這篇文章主要介紹了element-ui?table表格底部合計(jì)自定義配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
一直對(duì)編譯原理的東西都有一種恐懼感，感覺(jué)太難了，看不懂，打開(kāi)vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02