VueComponent

组件实例对象

1. Vue.extend 每一次被调用实际上返回的VueComponent都是不同的，从源码分析每一次调用的VueComponent 都是 var sub
立即定义的，return sub 每次返回的都是不同的sub
2. data methods 的this指向都是指向VueComponent函数。因为组件定义中data中的对象最终通过数据代理出现在VueComponent中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
    <school></school>
    <school></school>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 创建组件
    // 每次调用extend返回的都是一个全新的VueComponent对象
    const school = Vue.extend({
        name:'school',
        template:`
            <div>
                <h2>学校地址：{{address}}</h2>
                <h2>学校名称：{{name}}</h2>
            </div>`,
        data(){
            return{
                name:'ctdu',
                address:'ctdu 666',
            }
        }
    })
    console.log('@',school)
    new Vue({
        el:'#root',
        // 局部组件注册
        components:{
            school
        }
    })
</script>
</body>
</html>

源码

var Sub = function VueComponent (options) {
  console.log('VueComponent被调用了')
  this._init(options);
};
/....../
return Sub

在这里插入图片描述

0 条评论