Vue-31、Vue与Vuecomponent的关系

1、代码

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>
    </style>
</head>
<body>
    <!--
    1、一个重要的内置关系：VueComponent.prototype._proto_===Vue.prototype
    2、为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
    -->
<div id="root">

</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //第一步创建school组件
    const school = Vue.extend({
        //el:'#root'   //一定不要写el 配置项，因为最终所有的组件都要被一个vm 管理，由vm决定服务于那个容器。
        template: `
          <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <hr>
          </div>
        `,
        data() {
            return {
                schoolName: '清华大学',
                address: '北京',
            }
        },
    });

    new Vue({
        el: "#root",
        data:{
            msg:'你好'
        }
    });


    console.log(school.prototype.__proto__);
    console.log(Vue.prototype);

    console.log(school.prototype.__proto__ === Vue.prototype);
</script>
</body>
</html>

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

2、关系图

验证 VueComponent.prototype.proto===Vue.prototype

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>
    </style>
</head>
<body>
    <!--
    1、一个重要的内置关系：VueComponent.prototype._proto_===Vue.prototype
    2、为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
    -->
<div id="root">
    <school></school>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    Vue.prototype.x=99;
    //第一步创建school组件
    const school = Vue.extend({
        //el:'#root'   //一定不要写el 配置项，因为最终所有的组件都要被一个vm 管理，由vm决定服务于那个容器。
        template: `
          <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <hr>
                <button @click="showX"> 点我输出x</button>
          </div>
        `,
        data() {
            return {
                schoolName: '清华大学',
                address: '北京',
            }
        },
        methods:{
            showX(){
                console.log(this.x)
            }
        }
    });

    new Vue({
        el: "#root",
        data:{
            msg:'你好'
        },
        components:{
            school
        }
    });
    console.log(school.prototype.__proto__);
    console.log(Vue.prototype);
    console.log(school.prototype.__proto__ === Vue.prototype);
</script>
</body>
</html>