vue.js - Vue组件编写的两种方式

问题描述

问 题

在编写Vue组件的时候，用到Vue.component注册微全局组件，具体到某个组件的时候我们的写法可以有

(1)export default{}
(2)const ** = Vue.extend({}) export default ** 

这两种方式，这两种方式在编写组件具体有什么区别吗，哪种方式比较值得推荐？

解决方案

我觉得这里你问的应该是在组件中写不写Vue.extend的区别。

首先要明白Vue.extend是干什么的：

使用基础 Vue 构造器，创建一个子类。参数是一个包含组件选项的对象。

使用Vue.extend({}) 创建的是一个Vue的子类的构造函数:

var a = Vue.extend({});
new a() instanceof Vue //true

但其实在使用Vue.component(name, options)的时候, 如果options是对象, 那么vue会隐式的去调用Vue.extend(options)。
所以你在创建组件的时候没必要去手动写Vue.extend, 直接 export default{} 即可。

这篇关于vue.js - Vue组件编写的两种方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！