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