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

一味的闷头开发，却对基础概念缺乏理解，是个大坑... 查阅官网后现对自己的理解记录一下，用于日后复习巩固

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

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

1   let Footer = Vuew.extend({
2     data(){
3       return {
4         footerName:'I CAN DO IT...'
5       }
6     },
7     template:'<div>{{footerName}}</div>'
8   });

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

使用：

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

 Vue.component('footer-view',Footer);

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

new Footer({data:{'...':''}}).$mount('my-footer')

完整代码：

<template><my-footer></my-footer>
</template>
<script>let Footer = Vuew.extend({data(){return {footerName:'I CAN DO IT...'}},template:'<div>{{footerName}}</div>'});Vue.component('footer-view',Footer);// new Footer({//   data:{//     '...':''//   }// }).$mount('my-footer')
</script>

　　若有什么错误，欢迎指正。。。

更多专业前端知识，请上【猿2048】www.mk2048.com

vue.extend与vue.component的区别和联系相关推荐

关于vue.extend的理解应用
一.基本概念 Vue.extend( options ) 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 一般,我们会用 Vue.extend 接收一个 ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
vue:extend和mixin的区别
提到extend 总是感觉有些熟悉,都是可以共用一些方法和属性这不就是mixin混入吗?其实两者还是有较大差别的,可以类比后端语言的继承和多态,extend类似继承,而mixin类似多态. vue e ...
vue 1.0和vue 2.0的变化和区别
一.在每个组件模板,不在支持片段代码 vue 1.0是 <template><h3>我是组件</h3><strong>我是加粗标签</strong ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
Vue.extend
Vue.extend 1.传递的参数 Vue.extend({Object}),传递的是一个对象,这个对象包含template等,其实就是传递一个包含组件选项的对象. 他是属于Vue的全局API,用来 ...
Vue利用Vue.extend()实现自定义弹出框
运用场景:如果想实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,这时候Vue.extend + vm.$mount 组合就派上用场了. 简单介绍: Vue.ex ...
V记录2(文档)Vue.extend构造器
1.简单介绍 Vue.extend(options) 参数:对象用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数描述:Vu ...
[vue] 组件和插件有什么区别？
[vue] 组件和插件有什么区别? 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue.插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 V ...

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

vue.extend与vue.component的区别和联系相关推荐

最新文章

热门文章