詳解Vue與VueComponent的關係
阿新 • • 發佈：2021-12-06
下面這個案例 複習我們之前學過的原型鏈的知識點
// 定義一個建構函式
function Demo() {
this.a = 1
thiswww.cppcns.com.b = 2
}
//建立一個Demo例項物件
const d = new Demo()
console.log(Demo.prototype); //顯示原型屬性
console.log(d.__proto__); //隱式原型屬性
console.log(DemdUFm
根據下面這個元件來分析 Component
<body>
<div id="root">
<school></school>
<http://www.cppcns.com/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: '北京'
}
}
})
//建立Vue
new Vue({
el:'#root',components:{
school,}
})
</script>
</body>
1、school元件本質是一個名為VueComponent的建構函式，且不是程式設計師定義的，是Vue.extend生成的
2、我們只需要寫<school/>或<school</school>,vue解析時會幫我們建立school元件的例項物件；即Vue幫我們執行的：new VueComponent(options)
3、特別注意：每次呼叫Vue.extend，返回的都是一個全新的VueComponent
4、關於this指向：
- 元件配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是VueComponent例項物件 new Vue(options)配置中：data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是 Vue例項物件
5、VueComponent的例項物件，以後簡稱vc ---- 元件例項物件
重點
- 一個重要的內建關係：
VueComponent.prototype._proto_===Vue.prototype - 為什麼要有這個關係：讓元件例項物件vc可以訪問到Vue原型上的屬性、方法
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!