VueComponent

2022-07-31 15:02:06 阅读：157 来源： 互联网

标签：School Vue VueComponent 组件 options 构造函数

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VueComponent

VueComponent构造函数