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í)例對(duì)象，也就是 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í)例對(duì)象】。
- Vue 實(shí)例中的 this 指向：data 函數(shù)、methods 中的函數(shù)、watch 中的函數(shù)、computed 中的函數(shù)，它們的 this 均是【Vue 實(shí)例對(duì)象】。
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í)例對(duì)象 VueComponent 可以訪問到 Vue 原型上的屬性和方 法。
注：Vue 強(qiáng)制更改了 VueComponent 的原型對(duì)象指向 Object 的原型對(duì)象的隱式鏈，將其改到指向 Vue 的原型對(duì)象上。
到此這篇關(guān)于Vue組件之非單文件組件的使用詳解的文章就介紹到這了,更多相關(guān)Vue非單文件組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例
今天小編就為大家分享一篇vue封裝可復(fù)用組件confirm,并綁定在vue原型上的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue?事件獲取當(dāng)前組件的屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
最近找到幾個(gè)好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無用的請(qǐng)求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在看這篇文章的幾點(diǎn)要求：需要你先知道Vue-Router是個(gè)什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章2022-09-09
Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實(shí)現(xiàn)動(dòng)態(tài)路由的方法及路由原理解析
這篇文章主要介紹了路由原理及vue實(shí)現(xiàn)動(dòng)態(tài)路由,Vue Router 提供了豐富的 API，可以輕松地實(shí)現(xiàn)路由功能，并支持路由參數(shù)、查詢參數(shù)、命名路由、嵌套路由等功能，可以滿足不同應(yīng)用程序的需求，需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)消息列表向上無縫滾動(dòng)效果
本文主要實(shí)現(xiàn)vue項(xiàng)目中,消息列表逐條向上無縫滾動(dòng),每條消息展示10秒后再滾動(dòng),為了保證用戶能看清消息主題,未使用第三方插件,本文實(shí)現(xiàn)方法比較簡約,需要的朋友可以參考下2024-06-06
uni-app是一個(gè)使用Vue.js開發(fā)的多端開發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請(qǐng)求封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
element ui提交表單返回成功后自動(dòng)清空表單的值的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui提交表單返回成功后自動(dòng)清空表單的值,本文通過兩種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08