探索学习 Vue 组件篇 第五篇 VueComponent 构造函数

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第五篇 VueComponent 构造函数

• 这一节主要是研究VueComponent，了解组件的本质是什么；

---

1. 案例页面

   <div id="root">
        <h1>你好,{{name}}</h1>
        <hr/>
        <school></school>
    </div>
  <script type="text/javascript">
     Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    // 定义组件
     const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{schoolAddress}}</h2>
                <button @click='showName'>点我显示学校名</button>
            </div>
        `,
        data(){
            return {
                schoolName: '天津安锐捷大学',
                schoolAddress: '普天科技园'
            }
        },
        methods: {
            showName(){
                console.log("组件实例对象：",this)
            }
        },
     })
     console.log("school 本质：",school)
     const vm = new Vue({
        el: "#root",
        data: {
           name: "安锐捷",
        },
        // 注册school 组件
        components:{
            school:school
        }
      })
  </script>

• 案例效果图
  

2. 分析总结

2.1 school组件的本质

• 1、通过案例示例效果图可以明确的看出school 本身就是一个函数，准确的来说，schoole 是一个构造函数，一个名为VueComponent 的构造函数 ，是在我们Vue.extend({.....}) 的时候Vue 帮我们构造出来的函数，并不是由我们程序员自己来定义的；
• 2、创建school 组件完成后，当要使用school 组件时，我们只需要页面的合适位置写<school></school>或是<school/>就可以，,Vue解析时会帮我们创建school组件实例对象。即Vue 帮我们执行的： new VueComponent(options)
• 源码如下

    	Vue.extend = function (extendOptions) {
    	        
    	    此处省略1W ……
    	    var Sub = function VueComponent (options) {
    	        this._init(options);
    	    };
    	    此处省略1W ……
    	    return Sub
    	    };
    	}
  

  过源码可以看出 每次只要构造组件，那么就会 重新返回一个新的VueComponent 实例，所以即使一页面注册了好多组件，他们之间也不是有直接的联系
• 3、 特别注意的地方：每次调用 Vue.extend, 返回的都是一个全新的 VueComponent !!!

2.2. 关于this 指向：

• 组件配置中：
  data 函数、methods 中的函数、watch中的函数、computed 中的函数，它们的this 均是【VueComponent实例对象】
  VueComponent 的实例对象，以后简称vc (也可称之为：组件实例对象)

• new Vue() 配置中：
  data 函数、methods 中的函数、watch中的函数、computed 中的函数，它们的this 均是【Vue实例对象】
  Vue 的实例对象，以后简称**vm **

创作不易，欢迎 多多点赞，收藏 各节里面总结的还有不到位的欢迎指证
邮箱：pymxb1991@163.com
微信：py_mxb

盛年不重来，一日难再晨。及时当勉励，岁月不待人。——晋.陶渊明《杂诗》