溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Vue與VueComponent的關(guān)系是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
// 定義一個構(gòu)造函數(shù)
function Demo() {
this.a = 1
this.b = 2
}
//創(chuàng)建一個Demo實例對象
const d = new Demo()
console.log(Demo.prototype); //顯示原型屬性
console.log(d.__proto__); //隱式原型屬性
console.log(Demo.prototype === d.__proto__); //true
//程序員通過顯示原型屬性操作原型對象，追加一個x屬性，值為99
Demo.prototype.x = 99
console.log('@',d.__proto__.x);
根據(jù)下面這個組件來分析 VueComponent
<body>
<div id="root">
<school></school>
</div>
<script>
Vue.config.productionTip = false
//定義school組件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h3>學校名稱：{{name}}</h3>
<h3>學校地址：{{address}}</h3>
</div>
`,
data() {
return {
name: '尚硅谷',
address: '北京'
}
}
})
//創(chuàng)建Vue
new Vue({
el:'#root',
components:{
school,
}
})
</script>
</body>
1、school組件本質(zhì)是一個名為VueComponent的構(gòu)造函數(shù)，且不是程序員定義的，是Vue.extend生成的
2、我們只需要寫<school/>或<school</school>,vue解析時會幫我們創(chuàng)建school組件的實例對象；即Vue幫我們執(zhí)行的：new VueComponent(options)
3、特別注意：每次調(diào)用Vue.extend，返回的都是一個全新的VueComponent
4、關(guān)于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 ---- 組件實例對象
重點
一個重要的內(nèi)置關(guān)系：VueComponent.prototype._proto_===Vue.prototype
為什么要有這個關(guān)系：讓組件實例對象vc可以訪問到Vue原型上的屬性、方法
“Vue與VueComponent的關(guān)系是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼