VueComponent与Vue的内置关系

VueComponent与Vue的内置关系

1. 内置关系：VueComponent.prototype.proto === Vue.prototype

// 创建Vue组件
// school本质是一个VueComponent构造函数
const school = Vue.extend({
    template: `
        <div>
            <h2>学校的名称是：{{schoolName}}</h2>
            <h2>学校的地址是：{{address}}</h2>
        </div>
    `,
    data() {
        return {
            schoolName: '北京大学',
            address: '北京',
        }
    },
})

console.log('result', school.prototype.__proto__ === Vue.prototype)
//输出为 result - true

2. 目的： 让组件实例对象（vc）可以访问到Vue属性上的值

// 创建Vue组件

// school本质是一个VueComponent构造函数

const school = Vue.extend({
    //访问school中不存在的属性a
    template: `
        <div>
        <h2>vue中的属性x是：{{this.a}}</h2>
    </div>
    `,
})

//在vue原型上追加属性a
Vue.prototype.a = 10

//结果输出 vue中的属性x是：10