Vue-31、Vue与Vuecomponent的关系

1、代码

<!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: `
          

学校名称:{{schoolName}}

学校地址:{{address}}


`
, 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、关系图
Vue-31、Vue与Vuecomponent的关系_第1张图片
验证 VueComponent.prototype.proto===Vue.prototype

<!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: `
          

学校名称:{{schoolName}}

学校地址:{{address}}


`
, 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>

Vue-31、Vue与Vuecomponent的关系_第2张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)