Vue組件之非單文件組件的使用詳解
標(biāo)準(zhǔn)化開發(fā)時(shí)的嵌套：
在實(shí)際開發(fā)中，通常會(huì)創(chuàng)建一個(gè) APP 組件作為根組件，由這個(gè)根組件去管理其它的組件，而 Vue 實(shí)例只需要管理這個(gè) APP 組件就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue2標(biāo)準(zhǔn)化開發(fā)時(shí)的嵌套</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="APP"></div>
<script>
// 創(chuàng)建組件一
const FrameHead = {
template: `
<div>
<p>{{name}}</p>
</div>
`,
data() {
return {
name:"組件一"
}
}
}
// 創(chuàng)建組件二
const FrameBody = {
template: `
<div>
<p>{{name}}</p>
</div>
`,
data() {
return {
name:"組件二"
}
}
}
// 創(chuàng)建最大的根組件，由它來管理其它的組件
const app = {
template: `
<div>
<frame-head></frame-head>
<frame-body></frame-body>
</div>
`,
components:{
FrameHead,
FrameBody
}
}
const vm = new Vue({
template:`<app></app>`,
el: "#APP",
components: {app}
});
</script>
</body>
</html>
VueComponent 構(gòu)造函數(shù)【擴(kuò)展】：
<div id="APP"> <my-code></my-code> </div>
const MyCode = Vue.extend({
template: `
<div>
<p>{{name}}</p>
</div>
`,
data() {
return {
name:"你好呀！"
}
}
})
console.log(MyCode); // VueComponent
const vm = new Vue({
el: "#APP",
components: {
MyCode
}
});注：其實(shí)組件就是一個(gè)構(gòu)造函數(shù) VueComponent 。
關(guān)于 VueComponent：
- 組件本質(zhì)是一個(gè)名為 VueComponent 的構(gòu)造函數(shù)，且不是程序員定義的，是 Vue.extend 自動(dòng)生成的。
- 我們只要使用組件，Vue 解析時(shí)就會(huì)幫我們創(chuàng)建這個(gè)組件的實(shí)例對象，也就是 Vue 幫我們執(zhí)行了 new VueComponent(options) 這個(gè)構(gòu)造函數(shù)。
- 特別注意：每次調(diào)用 Vue.extend，返回的都是一個(gè)全新的 VueComponent 。
- 組件中的 this 指向：data 函數(shù)、methods 中的函數(shù)、watch 中的函數(shù)、computed 中的函數(shù)，它們的 this 均是【VueComponent 實(shí)例對象】。
- Vue 實(shí)例中的 this 指向：data 函數(shù)、methods 中的函數(shù)、watch 中的函數(shù)、computed 中的函數(shù)，它們的 this 均是【Vue 實(shí)例對象】。
Vue 實(shí)例與 VueComponent 的內(nèi)置關(guān)系：
// 查看 VueComponent 和 Vue 實(shí)例的關(guān)系 console.log( MyCode.prototype.__proto__ === Vue.prototype ); // true
- 一個(gè)重要的內(nèi)置關(guān)系：VueComponent.prototype.__proto__ === Vue.prototype
為什么要有這個(gè)關(guān)系：讓組件實(shí)例對象 VueComponent 可以訪問到 Vue 原型上的屬性和方 法。
注：Vue 強(qiáng)制更改了 VueComponent 的原型對象指向 Object 的原型對象的隱式鏈，將其改到指向 Vue 的原型對象上。
到此這篇關(guān)于Vue組件之非單文件組件的使用詳解的文章就介紹到這了,更多相關(guān)Vue非單文件組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
過濾器，本質(zhì)上就是一個(gè)函數(shù)。其作用在于用戶輸入數(shù)據(jù)后，它能夠進(jìn)行處理，并返回一個(gè)數(shù)據(jù)結(jié)果。下面這篇文章主要給大家介紹了Vue.js中過濾器的相關(guān)資料,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí)
本文主要介紹了ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí),同一父級(jí)下的子節(jié)點(diǎn)單選,又可以選擇多個(gè)不同父級(jí)下的節(jié)點(diǎn),具有一定參考價(jià)值,感興趣的可以了解一下2023-10-10
在Vue3中使用vue3-print-nb實(shí)現(xiàn)前端打印功能
在前端開發(fā)中,經(jīng)常需要打印頁面的特定部分,比如客戶列表或商品詳情頁,要快速實(shí)現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實(shí)現(xiàn)靈活的前端打印,需要的朋友可以參考下2024-06-06
Emit是Vue3中另一種常見的組件間傳值方式,它通過在子組件中觸發(fā)事件并將數(shù)據(jù)通過事件參數(shù)傳遞給父組件來實(shí)現(xiàn)數(shù)據(jù)傳遞,本文就來介紹一下Vue3 emit傳值,感興趣的可以了解一下2023-12-12
基于Vue實(shí)現(xiàn)頁面切換左右滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)頁面切換左右滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法
KML 文件作為一種標(biāo)準(zhǔn)的地理數(shù)據(jù)格式,廣泛應(yīng)用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實(shí)現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參
這篇文章主要介紹了vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
本文介紹了vuejs指令的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
本篇文章主要介紹了如何解決vue與傳統(tǒng)jquery插件沖突，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
這篇文章主要介紹了vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03