Vue組件基礎用法詳解
Vue組件概述
組件(Component)是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。根據(jù)項目需求，抽象出一些組件，每個組件里包含了展現(xiàn)、功能和樣式。每個頁面，根據(jù)自己所需，使用不同的組件來拼接頁面。這種開發(fā)模式使前端頁面易于擴展，且靈活性高，而且組件之間也實現(xiàn)了解耦。
在 Vue 里，一個組件本質(zhì)上是一個擁有預定義選項的一個 Vue 實例
組件是一個自定義元素或稱為一個模塊，包括所需的模板、邏輯和樣式。在HTML模板中，組件以一個自定義標簽的形式存在，起到占位符的功能。通過Vue.js的聲明式渲染后，占位符將會被替換為實際的內(nèi)容
下面是一個最簡單的模塊示例
<div id="app"> <xiaohuochai></xiaohuochai> </div>
Vue注冊組件
組件注冊包括全局注冊和局部注冊兩種
全局注冊
要注冊一個全局組件，可以使用 Vue.component(tagName, options)
Vue.component('my-component', {
// 選項
})
組件在注冊之后，便可以在父實例的模塊中以自定義元素 <my-component></my-component> 的形式使用
[注意]要確保在初始化根實例之前注冊了組件
<div id="example">
<my-component></my-component>
</div>
<script>
// 注冊
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
局部注冊
通過使用組件實例選項components注冊，可以使組件僅在另一個實例/組件的作用域中可用
<div id="example">
<my-component></my-component>
</div>
<script>
// 注冊
var Child = {
template: '<div>A custom component!</div>'
};
// 創(chuàng)建根實例
new Vue({
el: '#example',
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
</script>
組件樹
使用組件實例選項components注冊，可以實現(xiàn)組件樹的效果
<div id="example">
<my-component></my-component>
</div>
<script>
// 注冊
var headerTitle = {
template: '<p>我是標題</p>',
};
var headerContent = {
template: '<p>我是內(nèi)容</p>',
};
var header = {
template: `
<div class="hd">
<header-content></header-content>
<header-title></header-title>
</div>
`,
components: {
'header-content': headerContent,
'header-title': headerTitle
}
};
// 創(chuàng)建實例
new Vue({
el: '#example',
components: {
'my-component': header
}
})
</script>
對于大型應用來說，有必要將整個應用程序劃分為組件，以使開發(fā)可管理。一般地組件應用模板如下所示
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
v-once
盡管在 Vue 中渲染 HTML 很快，不過當組件中包含大量靜態(tài)內(nèi)容時，可以考慮使用 v-once 將渲染結(jié)果緩存起來
Vue.component('my-component', {
template: '<div v-once>hello world!...</div>'
})
Vue組件的模板分離
在組件注冊中，使用template選項中拼接HTML元素比較麻煩，這也導致了HTML和JS的高耦合性。慶幸的是，Vue.js提供了兩種方式將定義在JS中的HTML模板分離出來
script
在script標簽里使用 text/x-template 類型，并且指定一個 id
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
上面的代碼等價于
Vue.component('hello-world', {
template: '<p>Hello hello hello</p>'
})
下面是一個簡單示例
<div id="example">
<my-component></my-component>
</div>
<script type="text/x-template" id="hello-world-template">
<div>hello world!</div>
</script>
<script>
Vue.component('my-component', {
template: '#hello-world-template'
})
new Vue({
el: '#example'
})
</script>
template
如果使用<template>標簽，則不需要指定type屬性
<div id="example">
<my-component></my-component>
</div>
<template id="hello-world-template">
<div>hello world!</div>
</template>
<script>
// 注冊
Vue.component('my-component', {
template: '#hello-world-template'
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
Vue組件的命名約定
對于組件的命名，W3C規(guī)范是字母小寫且包含一個中劃線(-)，雖然Vue沒有強制要求，但最好遵循規(guī)范
<!-- 在HTML模版中始終使用 kebab-case --> <kebab-cased-component></kebab-cased-component> <camel-cased-component></camel-cased-component> <pascal-cased-component></pascal-cased-component>
當注冊組件時，使用中劃線、小駝峰、大駝峰這三種任意一種都可以
// 在組件定義中
components: {
// 使用 中劃線 形式注冊
'kebab-cased-component': { /* ... */ },
// 使用 小駝峰 形式注冊
'camelCasedComponent': { /* ... */ },
// 使用 大駝峰 形式注冊
'PascalCasedComponent': { /* ... */ }
}
Vue組件嵌套限制
并不是所有的元素都可以嵌套模板，因為要受到HTML元素嵌套規(guī)則的限制，尤其像<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 這樣的元素只能出現(xiàn)在某些其它元素內(nèi)部
[注意]關于HTML標簽的詳細嵌套規(guī)則移步至此
在自定義組件中使用這些受限制的元素時會導致一些問題，例如
<table id="example"> <my-row>...</my-row> </table>
自定義組件 <my-row> 被認為是無效的內(nèi)容，因此在渲染的時候會導致錯誤
<script>
// 注冊
var header = {
template: '<div class="hd">我是標題</div>'
};
// 創(chuàng)建實例
new Vue({
el: '#example',
components: {
'my-row': header
}
})
</script>
is屬性
變通的方案是使用特殊的 is 屬性
<table id="example">
<tr is="my-row"></tr>
</table>
<script>
// 注冊
var header = {
template: '<div class="hd">我是標題</div>'
};
// 創(chuàng)建實例
new Vue({
el: '#example',
components: {
'my-row': header
}
})
</script>
Vue組件的根元素
Vue強制要求每一個Vue實例(組件本質(zhì)上就是一個Vue實例)需要有一個根元素
如下所示，則會報錯
<div id="example">
<my-component></my-component>
</div>
<script>
// 注冊
Vue.component('my-component', {
template: `
<p>第一段</p>
<p>第二段</p>
`,
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
需要改寫成如下所示
<script>
// 注冊
Vue.component('my-component', {
template: `
<div>
<p>第一段</p>
<p>第二段</p>
</div>
`,
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
Vue組件數(shù)據(jù)傳遞
一般地，我們在Vue實例對象或Vue組件對象中，我們通過data來傳遞數(shù)據(jù)
<div id="example">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
// 注冊
Vue.component('my-component', {
template: '<div>{{message}}</div>',
data:{
message: 'hello'
}
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
運行上面的代碼，會使Vue停止執(zhí)行，并在控制臺發(fā)出錯誤提示，告訴你在組件中 data 必須是一個函數(shù)
可以用如下方式來繞開Vue的錯誤提示
<script>
// 注冊
var data = {counter: 0}
Vue.component('my-component', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data:function(){
return data;
}
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
由于這三個組件共享了同一個 data，因此增加一個 counter 會影響所有組件
當一個組件被定義， data 需要聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因為組件可能被用來創(chuàng)建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數(shù)據(jù)對象。通過提供 data 函數(shù)，每次創(chuàng)建一個新實例后，能夠調(diào)用 data 函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象
因此，可以通過為每個組件返回全新的 data 對象來解決這個問題：
<script>
// 注冊
Vue.component('my-component', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data:function(){
return {counter: 0};
}
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
</script>
現(xiàn)在每個 counter 都有它自己內(nèi)部的狀態(tài)了
Vue組件原生事件
有時候，可能想在某個組件的根元素上監(jiān)聽一個原生事件。直接使用v-bind指令是不生效的
<div id="example">
<my-component @click="doTheThing"></my-component>
<p>{{message}}</p>
</div>
<script>
Vue.component('my-component', {
template: '<button>按鈕</button>',
})
new Vue({
el: '#example',
data:{
message:0
},
methods:{
doTheThing(){
this.message++;
}
}
})
</script>
可以使用 .native 修飾 v-on指令即可
<div id="example">
<my-component @click.native="doTheThing"></my-component>
<p>{{message}}</p>
</div>
<script>
Vue.component('my-component', {
template: '<button>按鈕</button>',
})
new Vue({
el: '#example',
data:{
message:0
},
methods:{
doTheThing(){
this.message++;
}
}
})
更多關于Vue組件的使用方法請點擊下面的相關鏈接
相關文章
Vue3響應式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對于保持頂層屬性不變而內(nèi)部屬性可變的場景非常有用,本文將詳細介紹?shallowReadonly()?的使用方法及其應用場景,具有一定的參考價值,感興趣的可以了解一下2024-09-09
vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
在本篇文章里我們給大家整理了一篇關于優(yōu)化VUE項目的四個總要點，對此有需要的朋友們學習下天。2019-02-02
這篇文章主要為大家介紹了VUE實現(xiàn)token登錄驗證,詳細記錄實現(xiàn)token登錄驗證的步驟，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在本篇文章里小編給大家整理的是關于VUE 項目初建和常見問題以及相關知識點內(nèi)容，有需要的朋友們學習下。2019-09-09
最近工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實時更新視圖數(shù)據(jù),這個時候首先想到的是?vue.set(),下面這篇文章主要給大家介紹了關于vue中this.$set()的基本用法實例,需要的朋友可以參考下2023-01-01
vue3+Typescript實現(xiàn)路由標簽頁和面包屑功能
在使用 Vue.js 開發(fā)后臺管理系統(tǒng)時，經(jīng)常會遇到需要使用路由標簽頁的場景，這篇文章主要介紹了vue3+Typescript實現(xiàn)路由標簽頁和面包屑,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue3.x中apollo的使用,通過前端自身直接獲取到apollo的配置目前看到官方支持的客戶端是沒有vue的，本文給大家介紹了前端獲取到apollo數(shù)據(jù)的過程，需要的朋友可以參考下2023-02-02
本篇文章主要介紹了vue封裝第三方插件并發(fā)布到npm的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
今天小編就為大家分享 一篇VUE渲染后端返回含有script標簽的html字符串示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10