Vue元件建立的export default 和 Vue extend寫法區別,以及優劣?

時間 2021-06-03 19:13:32

1樓:

第一點,

Vue.component('component-name', )

等同於:

Vue.component('component-name', Vue.extend())

也就是說,在使用Vue.component時候,使用不使用Vue.extend都可以。

參見官方文件:Vue.js

第二點,Vue.componentVue.extend區別是啥呢?

1、使用Vue.componentVue.extend返回的都是可復用的元件構造器。

參見 Vue 例項 — Vue.js

而這些元件構造器是 Vue 元件化的基礎,通過例項化這些元件構造器,就可創造出可復用的元件。而這些元件構造器又是 Vue 的子類,這意味著通過這些元件構造器例項化的元件,都繼承者 Vue 的方法。

比如,const a = Vue.extend({})

2、Vue.component作用是告訴 Vue 在處理template時,將自定義元件標籤,比如替換為相應的元件。

Vue.component('test-component', Vue.extend(}

`, data() )

而 Vue.extend 卻不能,得這樣:

const TestComponent = Vue.extend(}

`, data() ,

})第三點,

export default 用法大多用在單頁面應用內,基於一系列腳手架,比如Vue-cli。如果你試著 console.log 通過 import 匯入的元件物件,你會發現,它就是乙個component config物件。

Vue.extend我經常見到用在元件的單元測試上,第二點提到過,例項化的元件可以直接$mount到元素上。

其他的我了解的不多,就不說了。

2樓:

大概是因為

Vue.js 2.x 的文件中幾乎沒有怎麼介紹 extend 方法(Vue 1.

x 文件中還說了第一種方法是第二種方法的語法糖,Vue 2.x 文件元件部分連這 extend 提都沒提)。

如果要用第二種方法,還需要新增importVuefrom 'vue' 語句。

因此大家基本上都使用第一種吧

請問vue元件如何reload或者說vue router如何重新整理當前的route??

呂小鳴 即使是相同路由之間的跳轉,也會重新重新整理頁面。 墨涵小雨 在main.js 裡面引入 import as lodash from lodash 全域性lodash Vue.prototype.baseLodash lodash 全域性事件匯流排 Vue.prototype.baseEven...

為什麼 Vue3 的元件庫都在使用 jsx tsx?

我們來倒推原因。作為第三方庫 考慮的是相容可能的場景 需要很多動態化處理jsx就是js的擴充套件,比template靈活 未必都是jsx,但是是有傾向 官方推薦template是有道理的,畢竟針對template有靜態優化。所以這個考量的點在於,需不需要那麼多的動態化處理。 okay哦開 因為越基礎...

VUE遞迴元件裡的具名插槽怎麼才起作用?

陳哥兒 前幾個回答沒乙個對的,網上也沒什麼解答。這個就是遞迴元件自定義插槽功能了,常見的tree,級聯元件都會用到。既然是遞迴元件,那插槽 無所謂具名還是作用域 也要無限遞迴下去,也就是上一級slot要作為下一級插槽內容傳下去,所以你的infinite box元件裡呼叫infinite box元件的...