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