从零认识Vue 组件extend

最新推荐文章于 2023-09-08 11:47:05 发布

VIP文章 SHIKIO

最新推荐文章于 2023-09-08 11:47:05 发布

阅读量247

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/SHIKIO/article/details/97827385

版权

Vue.extend

1. 通过实例化Vue构造器函数得到一个Vue实例,这个实例我们称之为’根实例’，它是最大的父级

2. 这个根实例是以标签的形式存在的，那么我们也称之为’ 根组件 ’

3. 根实例也是一个组件，但是我们得到只是跟组件

4. Vue.extend() 它就是对Vue功能的扩展，这个扩展就是组件

5. Vue是通过 Vue.extend() 来实现【扩展】 Vue的功能的，这个功能就是组件

6. Vue.extend如何使用？

- 通过new Vue.extend() 发现和new Vue一样了

console.log( Vue ) 
console.log( Vue.extend())

- 组件就是一个以标签化呈现的东西，所以我应该像标签一样使用

- 但是无论是 html3 还是 html5 肯定不会同意它随意来个标签的

- Vue会将组件编译成html结构

- Vue的这个处理过程，我们称之为 ’ 组件注册

总结:

1. Vue是通过Vue.extend() 来实现组件的

2. Vue的组件的使用时需要注册的

Vue-组件的注册

全局注册—完整

const Hello = Vue.extend({
   
    template: '<div> Hello 组件 </div>'
  })
  // Vue.component( 组件的名称,组件的配置 )
  Vue.component( 'Hello', Hello )

全局注册—简写

Vue.component(

关注