快捷導(dǎo)航

詳解Vue與VueComponent的關(guān)系

更新時(shí)間：2021年12月03日 15:21:28 作者：奶茶丶

這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

下面這個(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ì)象，以后簡稱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
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測試配置方式
這篇文章主要介紹了vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測試配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue3.0 上手體驗(yàn)
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實(shí)例詳解
這篇文章主要介紹了vue自定義指令directive的相關(guān)資料，下面通過實(shí)例給大家介紹,需要的朋友可以參考下
2018-01-01
關(guān)于Vue3中的響應(yīng)式原理
這篇文章主要介紹了關(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