vue-重要的内置关系

80 阅读1分钟

一个重要的内置关系:
VueComponent.prototype.proto === Vue.prototype
为什么要有这个关系?
让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

c3a660ff3506a91c6fe6ca0c13e4f1c.png 在vc的原型对象上__proto__不直接指向object的原型对象,而是强制把vc的__ptoto指向vue的原型对象,因此可以访问到vue原型上的属性和方法

<div id="root">
    <school></school>
</div>

<script type="text/javascript">
    Vue.prototype.x = 99
    //定义school组件
    
    //虽然在school组件上没有关于x的属性,但是在vm里面有,所以可以访问到vue原型上的属性
    const school = Vue.extend({
        name:'school',
        template:`
            <div>
                <h2>学校名称:{{name}}</h2>	
                <h2>学校地址:{{address}}</h2>	
                <button @click="showX">点我输出x</button>
            </div>
        `,
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showX(){
                console.log(this.x)
            }
        },
    })

    //创建一个vm
    const vm = new Vue({
        el:'#root',
        data:{
            msg:'你好'
        },
        components:{
            school
        }
    })
</script>