vue之元件註冊

2022-06-12 03:42:06 字數 1276 閱讀 4134

一、元件名

寫元件之前你要明確你的目的,想要做乙個什麼樣的元件,我們在註冊乙個元件的時候,需要給元件乙個名字,對於命名,盡可能明確,使用 kebab-case (短橫線分隔命名) 或 pascalcase (首字母大寫命名)。

使用 kebab-case (短橫線分隔命名) 定義乙個元件時,我們在引用這個自定義元素時其格式 :

vue.component('

my-component-name

', )

使用 pascalcase (首字母大寫命名) 定義乙個元件時,我們引用這個自定義元素時,其格式有兩種,不過有時這種命名的元件在呼叫時候,會自動解析成短橫線分割命名。

vue.component('mycomponentname', )

二、全域性註冊

元件全域性註冊後,可以在任何新建立的vue根例項的模板中使用。

vue.component('my-component-name', )

三、區域性註冊

四、在模板系統中區域性註冊

目前學習vue都是用webpack構建的,對於乙個**各元件應該怎麼構造分配還是不夠熟悉。

我們在不同元件中復用其他元件,需要在區域性註冊之前匯入每個你想使用的元件。

例如,在乙個假設的componentb.jscomponentb.vue檔案中,我們需要使用componenta和componentc,那麼我們需要import,同時在components選項中定義你想要使用的元件。

import componenta from './componenta'import componentc from './componentc'export 

default,

//...

}

五、基礎元件的自動化全域性註冊(還未實際應用過)

之前寫的父子元件都不是基礎通用的元件,如果我設計了很多button類,input類的只包含這種單個元素,在不同元件裡頻繁的使用,那麼就會造成有一些元件中會有很多包含基礎元件的長列表,會很冗雜。

如果你使用了 webpack (或在內部使用了 webpack 的 vue cli 3+),那麼就可以使用require.context只全域性註冊這些非常通用的基礎元件。

vue之全域性元件註冊

註冊全域性vue元件,避免多次匯入 註冊 1.建立乙個index.js檔案 匯入元件 import bigimg from bigimg let vue bigimg.install function vue,options 匯出元件 export default bigimg 2.全域性使用,繫結...

Vue元件註冊

方式一 vue.component my component name 方式二 vue.component mycomponentname 方式一 在dom中可以直接用,是有效的元素 方式二 可用在單檔案元件中 single file component 元件註冊後,可在全域性使用,並且全域性元件之...

vue元件註冊

我們會在多個頁面使用button,每個頁面寫起來很麻煩,如果想把它做成乙個公用元件,使用時直接呼叫會比較方便。現在建立了乙個元件button.vue。找到main.js檔案,然後輸入如下 import button from components button.vue vue.component m...