Vue組件化編程詳解
更新時(shí)間：2025年10月22日 10:02:22 作者：yume_sibai
文章介紹了Vue中組件的基本使用、定義、注冊(cè)、書寫標(biāo)簽和嵌套等關(guān)鍵步驟和注意事項(xiàng),詳細(xì)解釋了組件的配置選項(xiàng)、如何通過Vue.extend創(chuàng)建組件以及組件實(shí)例對(duì)象與Vue實(shí)例對(duì)象的區(qū)別,還提及了單文件組件的結(jié)構(gòu)和編寫邏輯,并強(qiáng)調(diào)了組件原型鏈的重要性
組件：用來實(shí)現(xiàn)局部(特定)功能效果的代碼集合?？捎米鲝?fù)用編碼，簡(jiǎn)化項(xiàng)目編碼，提高運(yùn)行效率。
一、基本使用
Vue中使用組件的三大步驟
- 定義組件(創(chuàng)建組件)
- 注冊(cè)組件
- 使用組件(寫組件標(biāo)簽)
如何定義一個(gè)組件？
(1).使用Vue.extend(options)創(chuàng)建，其中options和new Vue(options)時(shí)傳入的那個(gè)options幾乎一樣，但也有點(diǎn)區(qū)別：
- el不要寫，為什么？--最終所有的組件都要經(jīng)過一個(gè)vm的管理，由vm中的el決定服務(wù)哪個(gè)容器，在組件配置中配置el會(huì)報(bào)錯(cuò)
- data必須寫成函數(shù)，為什么？--避免組件被復(fù)用時(shí)，數(shù)據(jù)存在引用關(guān)系。
(2).備注：使用template可以配置組件結(jié)構(gòu)。
如何注冊(cè)組件？
- 局部注冊(cè)：靠new Vue的時(shí)候傳入components選項(xiàng)
- 全局注冊(cè)：靠Vue.component('組件名',組件)
編寫組件標(biāo)簽
<school></school>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 第三步:使用組件 -->
<Hello></Hello>
<hr>
<school></school>
<hr>
<student></student>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 第一步：定義shcool組件
const school = Vue.extend({
template:`
<div>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
</div>
`,
data() {
return {
name:'清華大學(xué)',
address:'北京'
}
},
})
// 第一步：定義student組件
const student = Vue.extend({
template:`
<div>
<h2>學(xué)生姓名：{{name}}</h2>
<h2>學(xué)生姓名：{{age}}</h2>
</div>
`,
data() {
return {
name:'清華',
age:18
}
},
})
// 第一步：定義Hello組件
const Hello = Vue.extend({
template:`
<h1>歡迎學(xué)習(xí){{msg}}!</h1>
`,
data() {
return {
msg:'Vue'
}
},
})
//注冊(cè)全局組件
Vue.component('Hello', Hello)
new Vue({
el:'#root',
//第二部：注冊(cè)局部組件
components:{
school,
student
}
})
</script>
</html>二、幾個(gè)注意點(diǎn)
關(guān)于組件名
(1).一個(gè)單詞組成：
- 第一種寫法(首字母小寫)：school
- 第二種寫法(首字母大寫)：School
(2).關(guān)于組件標(biāo)簽：
- 第一種寫法：<school></school>
- 第二種寫法：<school/>
(3).一個(gè)簡(jiǎn)寫方式：
const school = Vue.extend(options) 可簡(jiǎn)寫為const school = options
Vue實(shí)例對(duì)象和VueComponent實(shí)例對(duì)象的主要區(qū)別
因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例，所以它們與new Vue接收相同的選項(xiàng)，
例如data、computed、watch、methods以及生命周期鉤子等。
僅有的例外是像el這樣根實(shí)例特有的選項(xiàng)，即在VueComponent中不可以寫el配置項(xiàng)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>幾個(gè)注意點(diǎn)</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{msg}}</h1>
<hr>
<school></school>
<!-- 腳手架簡(jiǎn)寫方式 -->
<school/>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//簡(jiǎn)寫方式
const school = {
template:`
<div>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
</div>
`,
data() {
return {
name:'清華大學(xué)',
address:'北京'
}
},
}
new Vue({
el:'#root',
data:{
msg:'Vue'
},
components:{
school
}
})
</script>
</html>三、組件的嵌套
非單文件組件可以將多組件進(jìn)行嵌套書寫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件的嵌套</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root" :x="n"></div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定義student組件
const student = Vue.extend({
template:`
<div>
<h2>學(xué)生姓名：{{name}}</h2>
<h2>學(xué)生姓名：{{age}}</h2>
</div>
`,
data() {
return {
name:'清華',
age:18
}
},
})
//定義school組件
const school = Vue.extend({
template:`
<div>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name:'清華大學(xué)',
address:'北京'
}
},
components:{
student
}
})
//定義hello組件
const hello = Vue.extend({
template:`
<div>
<h1>歡迎學(xué)習(xí){{msg}}</h1>
</div>
`,
data() {
return {
msg:'Vue'
}
},
})
//定義app組件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
data() {
return {
}
},
components:{
school,
hello
}
})
new Vue({
el:'#root',
//這種寫法會(huì)把div替換掉
template:`
<app></app>
`,
data() {
return {
n:1
}
},
components:{
app
}
})
</script>
</html>四、VueComponent
關(guān)于VueComponent
1.school組件本質(zhì)是一個(gè)名為VueComponent的構(gòu)造函數(shù)，且不是程序員定義的，是Vue.extend生成的。
2.我們只需要寫<school></school>或<school/>，Vue解析時(shí)會(huì)幫我們創(chuàng)建school組件的實(shí)例對(duì)象，即Vue幫我們執(zhí)行的：new VueComponent(options)。
3.特別注意：每次調(diào)用Vue.extend，返回的都是一個(gè)全新的VueComponent?。?！
4.關(guān)于this的指向：
組件配置中：
- data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù)，它們的this均是【VueComponent實(shí)例對(duì)象】
.new Vue(options)配置中：
- data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù)，它們的this均是【Vue實(shí)例對(duì)象】
5.VueComponent的實(shí)例對(duì)象，以后簡(jiǎn)稱vc(也可以稱之為：組件實(shí)例對(duì)象)。Vue的實(shí)例對(duì)象，以后簡(jiǎn)稱vm。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueComponent</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
<hr>
<hello></hello>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const school = Vue.extend({
template:`
<div>
<h2>學(xué)校名稱:{{name}}</h2>
<h2>學(xué)校地址:{{address}}</h2>
<button @click="output">點(diǎn)我顯示學(xué)校名</button>
</div>
`,
data() {
return {
name:'清華大學(xué)',
address:'北京'
}
},
methods: {
output(){
console.log(this)
alert(this.name)
}
},
})
const test = Vue.extend({
template:`
<h2>Vue</h2>
`,
})
const hello = Vue.extend({
template:`
<div>
<h2>你好{{msg}}!</h2>
<test></test>
</div>
`,
data() {
return {
msg:'Vue'
}
},
components:{
test
}
})
const vm = new Vue({
el:'#root',
components:{
school,
hello
}
})
</script>
</html>五、一個(gè)重要的內(nèi)置關(guān)系
VueComponent.prototype.__proto__ === Vue.prototype
為什么要有這個(gè)關(guān)系？
有了這個(gè)原型鏈，就可以讓組件實(shí)例對(duì)象可以訪問到Vue原型上的屬性、方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一個(gè)重要的內(nèi)置關(guān)系</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
Vue.prototype.x=99
const school = Vue.extend({
template:`
<div>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<button @click="showX">點(diǎn)我輸出x</button>
</div>
`,
data() {
return {
name:'清華大學(xué)',
address:'北京'
}
},
methods: {
showX(){
alert(this.x)
}
},
})
new Vue({
el:'#root',
components:{
school
}
})
console.log('@',Vue.prototype === school.prototype.__proto__) //輸出為true
// //定義一個(gè)構(gòu)造函數(shù)
// function demo(){
// this.a=1,
// this.b=2
// }
// demo.prototype.x=99
// //創(chuàng)建一個(gè)實(shí)例對(duì)象
// const d = new demo()
// console.log(demo.prototype) //顯示原型對(duì)象
// console.log(d.__proto__) //隱式原型對(duì)象
// console.log(demo.prototype === d.__proto__) //輸出為true
</script>
</html>六、單文件組件
前面五點(diǎn)都使用非單文件組件進(jìn)行舉例，而在這一大點(diǎn)將簡(jiǎn)單描述單文件組件的結(jié)構(gòu)與編寫。注意：
1.單文件組件編寫邏輯與非單文件組件邏輯大體相同，僅結(jié)構(gòu)不同；
2.單文件組件請(qǐng)?jiān)谀_手架中使用。
School.Vue創(chuàng)建School組件：
<template>
<div class="demo">
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<button @click="showName">點(diǎn)我提示學(xué)校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'尚硅谷',
address:'北京昌平'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>Student.Vue創(chuàng)建student組件：
<template>
<div>
<h2>學(xué)生姓名：{{name}}</h2>
<h2>學(xué)生年齡：{{age}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'張三',
age:18
}
}
}
</script>
App.Vue將所需的組件統(tǒng)一引入并注冊(cè)：
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入組件
import School from './School.Vue'
import Student from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
main.js將編寫完成的App.Vue引入頁面節(jié)點(diǎn)中:
import App from './App.vue'
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})index.html引入main.js和Vue.js并創(chuàng)建在main.js中預(yù)留的節(jié)點(diǎn)：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>單文件組件</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="./main.js"></script> </body> </html>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
如何使用Vue3構(gòu)建一個(gè)圖像畫廊(支持圖片上傳)
這篇文章主要給大家介紹了關(guān)于如何使用Vue3構(gòu)建一個(gè)圖像畫廊(支持圖片上傳)的相關(guān)資料,Vue畫廊這是vue編寫的圖庫應(yīng)用程序,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
使用Vue寫一個(gè)todoList事件備忘錄經(jīng)典小案例
學(xué)習(xí)了幾天Vue之后終于迎來了第一個(gè)小案例,todoList是非常常見地一個(gè)小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫一個(gè)todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)讀取本地圖片的功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以學(xué)習(xí)一下2023-07-07
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了詳解vue-cli官方腳手架配置,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue實(shí)現(xiàn)導(dǎo)出excel的多種方式總結(jié)
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實(shí)現(xiàn),也可以通過前后端配合實(shí)現(xiàn),這篇文章將為大家詳細(xì)介紹幾種常用的實(shí)現(xiàn)方式,需要的可以參考下2023-08-08
element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入
本文主要介紹了element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue+el-table可輸入表格使用上下鍵進(jìn)行input框切換方式
文章介紹了如何在使用Vue和Element UI的el-table組件時(shí),通過上下鍵在輸入框之間切換,并且特別說明了如何在完工數(shù)量這一列中使用上下鍵進(jìn)行切換2025-11-11
基于Vue+ECharts實(shí)現(xiàn)地圖展示與交互
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實(shí)現(xiàn)一個(gè)互動(dòng)式的地圖展示組件,其中支持返回上一層地圖、點(diǎn)擊查看不同城市的詳細(xì)信息,以及根據(jù)數(shù)據(jù)動(dòng)態(tài)展示不同的統(tǒng)計(jì)信息,感興趣的小伙伴跟著小編一起來看看吧2025-02-02