vue.extend与vue.component的区别和联系

如果大家只顾开发，对基础知识不了解，在今后的解决问题过程中，也是个大问题，今天小编抽空对基础概念给大家屡一下，用于大家日后学习。

Vue.extend({})简述：使用vue.extend返回一个子类构造函数，也就是预设部分选项的vue实例构造器。

后可使用vue.component进行实例化、或使用new extendName().$mount(''+el)方式进行实例化（从而实现模拟组件）。

Vue.component({})简述：不多介绍了。。。用于生成全局组件

使用：

　　1，Vue.component使用Vue.extend生成的构造函数：

　　2，实例化构造函数从而模拟组件：

vue.extend与vue.component的区别总结

在Vue.js中，Vue本身是一个constructor。

Vue.extend() 是一个继承于方法的 class，参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并且返回相应的 constructor。

而Vue.component()实际上是一个类似于Vue.directive() 和 Vue.filter()的注册方法，它的目的是给指定的一个constructor一个String类型的ID，

之后Vue.js可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend()。

Vue.js支持两种不同的API模型：一种是基于类的，命令式的，Backbone 类型的API；另一种是基于标记语言的，声明式的，Web组件类型的API。

如果还是困惑的话，可以想象你是怎么创建通过new Image()或者 <img>标签创建 image元素的就知道了。

这两种方法都对指定的类型很有用，Vue.js提供这两者只是为了更好的灵活性。

下面看下vue.extend，new vue 和vue.component的区别

extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件

你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用apple组件

var apple = Vue.extend({ …. }) Vue.component(‘apple',apple)

你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({ components:{ apple:apple } })

Vue.component 你可以创建 ，也可以取组件 例如下

var apple = Vue.component(‘apple') 而new vue 是新建一个vue对象 所以可以理解为new vue < vue.extand < vue.component

赞 (0)

相关推荐

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • 深入理解Vue生命周期、手动挂载及挂载子组件

    深入理解Vue生命周期、手动挂载及挂载子组件

    本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

  • Vue组件教程之Toast(Vue.extend 方式)详解

    Vue组件教程之Toast(Vue.extend 方式)详解

    一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component 方式实现的,这样的话我们在使用的时候还要在 DOM 中放置一个组件元素,然后通过一个变量来控制它的显示隐藏,这样使用起来非常的不方便.那么有什么方法可以不用在 DOM 中手动放置组件元素就可以直接调用呢?答案就是 Vue.extend.通过 Vue.extend 方式实现的组件,需要两个文件,一个是 .vue 文

  • vue组件挂载到全局方法的示例代码

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢. 以bootstrap-vue中的Alert组件为例,分一下几步进行: 1.定义一个vue文件实现对原组件的再次封装 main.vue <template> &

  • 用Vue.extend构建消息提示组件的方法实例

    用Vue.extend构建消息提示组件的方法实例

    前提 前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码.自己弄出来一个简陋的消息提示组件 Vue.extend是什么 按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它. 了解了这点之后

  • Vue.extend实现挂载到实例上的方法

    本文实例讲述了Vue.extend实现挂载到实例上的方法.分享给大家供大家参考,具体如下: 这里主要是做个笔记 根据官网的说法,Vue.extend:是使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 官网的用法是: <div id="mount-point"></div> // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{

  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <style> </styl

  • 关于vue.extend和vue.component的区别浅析

    关于vue.extend和vue.component的区别浅析

    前言 最近一个朋友问我vue.extend和vue.component两者之间有什么区别?突然这么一问竟答不出来,回来想想有必要总结下,所以本文就来给大家介绍关于vue.extend和vue.component的区别,下面话不多说了,来一起看看详细的介绍吧. Vue.extend 返回的是一个"扩展实例构造器",也就是一个预设了部分选项的 Vue 实例构造器 var myVue = Vue.extend({ // 预设选项 }) // 返回一个"扩展实例构造器" /

  • vue 挂载路由到头部导航的方法

    vue 挂载路由到头部导航的方法

    路由是写好了,但正确的切换路由方式不应该是我们在地址栏里面输入地址,有追求的方式是点击头部的导航菜单来切换,就像这样 我们点击上面的发现.关注.消息就切换路由导航 我们先把头部的导航写好 打开header.vue 先把vue组件的基本格式写好 然后开始布局写头部 这里很不好意思,我一直以为头部的header.vue是引入了的,实际上并没有........ 打开app,vue重新编写一下 app.vue 代码: <template> <div id="app">

  • vue.extend实现alert模态框弹窗组件

    本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert

随机推荐