搜索
简帛阁>技术文章>Vue与VueComponent的关系

Vue与VueComponent的关系

 下面这个案例 复习我们之前学过的原型链的知识点 

       // 定义一个构造函数
        function Demo() {
            this.a = 1
            this.b = 2
        }
        //创建一个Demo实例对象
        const d = new Demo()
        console.log(Demo.prototype); //显示原型属性
        console.log(d.__proto__); //隐式原型属性
        console.log(Demo.prototype === d.__proto__); //true
        //程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
        Demo.prototype.x = 99
        console.log('@',d.__proto__.x);

 

 根据下面这个组件来分析 VueComponent

<body>
    <div id="root">
         <school></school>
    </div>
    <script>
        Vue.config.productionTip = false
        //定义school组件
        const school = Vue.extend({
            name: 'school',
            template: `
              <div>
                <h2>学校名称:{<!-- -->{name}}</h2>
                <h2>学校地址:{<!-- -->{address}}</h2>
              </div>
            `,
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京'
                }
            }   
        })
  
        //创建Vue
        new Vue({
            el:'#root',
            components:{
                school,
            }
        })
    </script>
</body>

1、school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的

2、我们只需要写或<>,vue解析时会帮我们创建school组件的实例对象;

即Vue帮我们执行的:new VueComponent(options)

3、特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent

4、关于this指向:

  • 组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是 VueComponent实例对象
  • new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是 Vue实例对象

5、VueComponent的实例对象,以后简称vc ---- 组件实例对象

重点

一个重要的内置关系:VueComponent.prototype._proto_===Vue.prototype

为什么要有这个关系:让组件实例对象vc可以访问到Vue原型上的属性、方法 

下面这个案例复习我们之前学过原型链知识点//定义一个构造函数functionDemo(){thisa1thisb2}//创建一个Demo实例对象constdnewDemo()consolelog
下面这个案例复习我们之前学过原型链知识点//定义一个构造函数functionDemo(){thisa1thisb2}//创建一个Demo实例对象constdnewDemo()consolelog
章目录模块组件、模块化组件化非单文件组件单文件组件模块组件、模块化组件化模块:理解:向外提供特定功能js程序,一般就是一个js文件为什么:js文件很多很复杂作用:复用js,简化js编写,
在一个非单文件组件中(一个文件中包含n个组件,最常见就是单个html文件中存在多个组件),如果我们需要在这个文件中创建n个组件,然后再页面上展示,这时候我们就需要先定义组件,然后注册组件,最后使用
欢迎学习交流!!!持续更新中…文章目录组件化编程1模块组件、模块化组件化2非单文件组件3组件嵌套4关于VueComponent一个重要内置关系5单文件组件vue文件组成(3部分)基本使用组件
录vuejs动态设置VueComponent高度问题1获取HTML元素高度2获取VueComponent标签生成元素高度3判断一个对象是jQuery对象还是DOM对象vue动态获取、设置组件高
hymeleaf和vue不是一类事务。模板引擎:Thymeleaf、freemarker、JSP。前端框架:vue、angularjs、react。Thymeleaf是一个替代JSP模板引擎。使用
众所周知,组件式开发方式给我们带来了方便,不过也引入了新问题,组件之间数据就像被一道无形墙隔开,如果我们希望临时让两个组件直接通信,vuex太巨,而$emit又不好维护provider不可控这
目录axios和vueaxios关系/区别axios和vueaxios使用方式区别1、axios使用方式2、vueaxios使用方式axios和vueaxios使用哪一种较好vueaxiosp
什么是进程?在Window操作系统中,进程分为后台进程和应用进程。后台进程顾名思义是操作系统开启运行时,启动进程,负责一些操作系统基础且重要功能。应用进程就是当我们用户打开如qq,qq音乐应用