詳解Vue與VueComponent的關(guān)系
下面這個(gè)案例 復(fù)習(xí)我們之前學(xué)過的原型鏈的知識(shí)點(diǎn)
// 定義一個(gè)構(gòu)造函數(shù)
function Demo() {
this.a = 1
this.b = 2
}
//創(chuàng)建一個(gè)Demo實(shí)例對(duì)象
const d = new Demo()
console.log(Demo.prototype); //顯示原型屬性
console.log(d.__proto__); //隱式原型屬性
console.log(Demo.prototype === d.__proto__); //true
//程序員通過顯示原型屬性操作原型對(duì)象，追加一個(gè)x屬性，值為99
Demo.prototype.x = 99
console.log('@',d.__proto__.x);
根據(jù)下面這個(gè)組件來分析 VueComponent
<body>
<div id="root">
<school></school>
</div>
<script>
Vue.config.productionTip = false
//定義school組件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>學(xué)校名稱：{{name}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
</div>
`,
data() {
return {
name: '尚硅谷',
address: '北京'
}
}
})
//創(chuàng)建Vue
new Vue({
el:'#root',
components:{
school,
}
})
</script>
</body>
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ì)象
重點(diǎn)
- 一個(gè)重要的內(nèi)置關(guān)系：
VueComponent.prototype._proto_===Vue.prototype - 為什么要有這個(gè)關(guān)系：讓組件實(shí)例對(duì)象vc可以訪問到Vue原型上的屬性、方法
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測(cè)試配置方式
這篇文章主要介紹了vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測(cè)試配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3.0 beta 版本已經(jīng)發(fā)布有一段時(shí)間了，今天這篇文章就帶大家體驗(yàn)一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新的方法詳解
這篇文章主要介紹了vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新的方法,結(jié)合具體項(xiàng)目實(shí)例形式分析了vue2.0結(jié)合DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新過程中遇到的問題與相應(yīng)的解決方法,需要的朋友可以參考下2017-03-03
在vue中使用screenfull?依賴,實(shí)現(xiàn)全屏組件方式
這篇文章主要介紹了在vue中使用screenfull?依賴，實(shí)現(xiàn)全屏組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue自定義指令directive的相關(guān)資料，下面通過實(shí)例給大家介紹,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了關(guān)于Vue3中的響應(yīng)式原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3引入uview-plus3.0移動(dòng)組件庫的流程
這篇文章主要介紹了vue3引入uview-plus3.0移動(dòng)組件庫的流程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
vue3 拖拽hooks(可兼容移動(dòng)端)和自定義指令拖拽的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3 拖拽hooks(可兼容移動(dòng)端)和自定義指令拖拽的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)
本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05