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