VueComponent

VueComponent构造函数

是Vue.extend(options)返回值,每次都返回一个全新的 VueComponent(options)构造函数
其中options是 组件配置对象 ---> {data,methods,computed....}

1.定义组件

const School = Vue.extend(options) // 创建school组件

const Student = Vue.extend(options) // 创建student组件

/*
  因为Vue.extend()每次都返回全新的VueComponent，所以school的构造函数 和 student的构造函数 不一样
*/

2.注册组件

// 配置项中：注册组件（局部注册）
components:{
  School:School
/*
  前边的School是组件标签 或者叫 组件名
  后面这个School其实就是Vue.extend(options)的返回值VueComponent(options)

  单文件组件开发中：
    一般后面的School是import过来的组件配置对象，Vue会自动调用Vue.extend(配置对象)生成独一无二的VueComponent构造函数
*/
}

3.使用组件

<template>
  <School/> // 这种自闭合写法需要在脚手架环境下
  <School></School>
/*
  当模板解析时发现你写了School组件标签，那Vue就会自动 School = new VueComponent(options) 创建组件
这个VueComponent(options)就是你注册组件时 组件标签:后的构造函数
*/
</template>

总结
所以不同组件的构造函数VueComponent不一样，这困扰了我很久...

标签：School,Vue,VueComponent,组件,options,构造函数
来源： https://www.cnblogs.com/imycc/p/16537107.html