Vue vue.extend 和vue.component 两则之间的区别
Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器
Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 //然后就可以这样来使用 var vE = new myExtend({ //其它选项 })
Vue.component 是用来全局注册组件的方法,其作用是将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用类似于 new myVue 这样的构造函数来生成组件实例,并挂载到自定义元素上,当然实际情况要比这复杂得多,还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。
html:
<vE></vE>
此时页面必然是没有任何效果的,:
扩展实例构造器还需要挂载:
new eE().$mount('eE');
https://www.jb51.net/article/118851.htm
extend 是构造一个组件的语法器。
你给它参数 他给你一个组件 然后这个组件可以用到Vue.component 这个全局注册方法里,
也可以在任意vue模板里使用<componentname>组件
var apple = vue.extend({
...
})
Vue.component('componentname',componentname‘)
你可以用到vue实例或者某个组件中的components 属性中并在内容使用template-name
new Vue({
components:{
componentname:comontentname
}
})
Vue.component你可以创建,也可以取组件
Sample:
var component = Vue.component('componentname')
Vue vue.extend 和vue.component 两则之间的区别的更多相关文章
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- Vue.extend和Vue.component的联系与差异
extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- Vue与REACT两个框架的区别和优势对比
VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...
- Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"
一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue通过extend动态创建全局组件(插件)学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决
VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...
随机推荐
- Android 深入浅出 - Android系统启动过程
Activity的类继承关系及跟踪Activity的启动 Android系统启动过程 https://study.163.com/course/courseLearn.htm?courseId=213 ...
- [原创]HTML 用div模拟select下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...
- 29.Spring-基础.md
目录 1.目的和作用 [toc] 2.概念 2.1框架的设计 2.2控制反转 2.3AOP [toc] 3. 3.1Spring六大模块 [toc] 1.目的和作用 解决对象的创建和以及对象依赖关系的 ...
- Python学习第二步骤
第一步的基本的语法,在Linux或者mac(别喷)上直接输入Python,查看版本,如果显示就是已经内置了 第二步当然是进行数据库的操作了 我选择的是mysql 那几个踩到的雷 分别是: 1:MySQ ...
- ArcGIS Python编程案例-电子资料链接
ArcGIS Python编程案例(1)-Python语言基础 https://www.jianshu.com/p/dd90816d019b ArcGIS Python编程案例(2)-使用ArcPy编 ...
- C# 图像处理: 获取当前活动窗口句柄,获取窗口大小及位置
需调用API函数 需在开头引入命名空间 using System.Runtime.InteropServices; 获取当前窗口句柄:GetForegroundWindow() [DllImport( ...
- Java中String的intern方法,javap&cfr.jar反编译,javap反编译后二进制指令代码详解,Java8常量池的位置
一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...
- SSM商城项目(二)
1. 学习计划 1.将工程改造为基于SOA架构 2.商品列表查询功能实现. 2. 将工程改造为SOA架构 2.1. 分析 由于商城是基于soa的架构,表现层和服务层是不同的工程.所以要实现商品列表查询 ...
- hibernate flush clear的区别
有的时候你执行了更新什么的操作不一定能查出来:没有保存到数据库 以下的缓存是指一级缓存,即session:默认缓存是一级缓存: flush的意思就是执行sql,但是还没有commit,没有持久化:再清 ...
- 函数式编程语言(Functional Program Language)
(一) 什么是函数编程语言 简单说,"函数式编程"是一种"编程范式"(programming paradigm),也就是如何编写程序的方法论. 是一种编程典范, ...