Vue中组件到底是什么
1.先说结论:
Vue中组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
2.我们使用组件时发生了什么?
比如定义了一个school,然后在页面上使用它
我们只需要写 < school/ > 或< school >< /school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
3.实际代码,我们定义一个school组件,然后在页面中打印出来。
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>VueComponent</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><school></school></div></body><script type="text/javascript">Vue.config.productionTip = false//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <button @click="showName">点我提示学校名</button></div>`,data(){return {name:'尚硅谷',address:'北京'}},methods: {showName(){console.log('showName',this)}},})const test = Vue.extend({template:`<span>atguigu</span>`})console.log('@',school)//创建vmconst vm = new Vue({el:'#root',components:{school,hello}})</script>
</html>
打印结果如下,是一个VueComponent构造函数:
我们也可以点进去看一下源码
我们使用组件时如何证明它执行了new VueComponent()操作?
我们直接在源码中加一句代码:
首先我们在代码中只定义组件,并不使用。页面中只有打印出school,相当于前面说的school组件本质是个VueComponent构造函数,但是并未执行。
然后我们在页面中使用school组件,打印结果如下:
4.vm(Vue实例)和组件的关系,我们直接打印vm。
console.log(vm);
我们发现有个chilren属性,是个数组,展开之后发现是school对应的VueComponent实例对象
Vue中组件到底是什么相关推荐
- Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
- vue中组件在不同页面中渲染出错
vue中组件在不同页面中渲染出错 封装了一个组件 封装了一个组件 遇到问题了,特向各位大佬请教 比如我封装了一个 child 组件 我在father 页面中引入 可以正常使用 而且css 样式不会出现 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
- vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
- Vue中组件之间8中通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
- 面试官:Vue中组件和插件有什么区别?
一.组件是什么 回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度 ...
最新文章
- 干货!仅有 100k 参数的高效显著性检测方法
- 当 AI 开始“入侵”人类
- 字符集与编码(四)——Unicode
- Scala集合List的常用方法:take/flatMap/filter/zip/union/intersect/diff及WordCount集合实现
- 为JPA的本机查询API键入安全查询
- day20 django
- KubeEdge@MEC:Kubernetes容器生态与5G的结合
- java sort 效率_性能对比:collections.sort vs treeSet sort vs java8 stream.sorted
- python3装饰器例子_Python装饰器几个有用又好玩的例子
- Understand层级关系视图中几种分类的介绍
- C#委托 模板和回调函数
- 关于android studio报错Attempt to invoke virtual method 'void android.widget.ListView.setAdapter(android.
- 《游戏程序设计模式》 2.2 - 游戏循环
- Java面向对象编程 实验报告
- java 验证码框架_Java验证码开源框架:jcaptcha
- 普源DG5000系列函数/任意波形发生器功能解析
- 电路图符号科普、整流电路、稳压电路、放大电路及调幅与检波电路和常见的基本电路
- 计算机专业女生进电网,考入华北电力大学计算机专业,无缘国家电网,这是为什么?...
- Kali 实现ARP断网攻击_arp断网攻击_arp欺骗
- mobileconfig使用发布者证书动态签名