vue.extend的用法(vue.extend和vue.component的区别)
1、vue.extend的用法
使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个“子类”(构造器)。参数是一个包含组件选项的对象。
const Sub = function VueComponent (options) { this._init(options) } Sub.prototype = Object.create(Super.prototype) Sub.prototype.constructor = Sub
2、vue.component的用法
注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。内部实质上调用了vue.extend,最后返回"子类"(构造器),这个子类构造器。
vue.component方法的定义中有如下代码:
// 此处 this 是 Vue ; this.options._base也是Vue ;相当于Vue.extend definition = this.options._base.extend(definition) ... return definition
3、综合例子如下:
var Component1 = Vue.component('any',{ template:'<div>Component1</div>' }) var Component2 = Vue.extend({ template:'<div>Component2</div>' }) console.log(Component1); console.log(Component2); var App = Vue.extend({ components:{Component1,Component2}, data() { return { a: 12 } }, template: `<div> {{this.a}} <any/> <Component1/> <Component2/> </div>`, }) new Vue({ render(h){ return h(App) } }).$mount('#app')
通过components注册了一个全局any组件,可以在App中直接使用。
Component1和Component2这两个构造函数通过局部注册之后,也可以在App中使用
4、components:{组件一,组件二}
单文件vue中经常会通过import引入其他组件,然后在本组件中注册和使用,代码:
<template> <Icon/> </template> <script> import Icon from './icon.vue' console.log(Icon) export default { components:{Icon} } </script>
打印Icon,发现Icon是一个对象,既可以是对象也可以是函数,Vue内部是如何处理的呢?
在vue内部创建虚拟dom的时候有如下的代码:
if(isObject(Ctor)) { Ctor= baseCtor.extend(Ctor) }
此处的Ctor对应着上面的Icon,当判断是对象的时候会调用extend方法,也就是vue.extend方法,返回一个子类构造函数,殊途同归。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.com/vue/7218.html
原文地址:https://tangjiusheng.com/vue/7218.html
大家都在看
- 前端笔试vue面试题必问题和答案(vue常见面试题必问大全)
- Vue弹窗后怎么禁止滚动条滚动?
- 前端vue过滤器的使用方法(全局和局部过滤器详解)
- uniapp和vue有什么区别(一文搞懂uniapp是做什么的)
- vue3中的readonly单向数据流函数(readonly函数使用详解)
- vue中checkbox勾选触发事件的使用(click事件和change事件方法对比)
- uniapp和vue有什么区别( 前端vue和uniapp哪个好用 )
- vue3路由跳转方式详解(vue3router知识点和用法总结)
- vue3生命周期详解(vue2与vue3的生命周期对比)
- vue3定义全局变量和全局方法(vue3新方法globalProperties)