03 深入了解元件 元件註冊(註冊方式)

2021-09-28 21:53:59 字數 3392 閱讀 7545

模組系統中-註冊方式

大小寫:

小寫kebab-case或者pascalcase。eg:

my-component-name或者mycomponentname

字串模板:就是反引號。

dom:非字串模板。

推薦:kebab-case,都能使用。

註冊方式

全域性註冊:

註冊之後可以用在任何新建立的 vue 根例項 (new vue) 的模板中。在所有子元件中也是如此,也就是說這三個元件在各自內部也都可以相互使用。

模板:

>

<

/component-a>

<

/component-b>

<

/component-c>

<

/div>

vue.

component

('component-a',)

vue.

component

('component-b',)

vue.

component

('component-c',)

newvue

()

例子:

>

<

/component-a>

<

/component-b>

<

/div>

>

<

/component-a>

<

/component-b>

<

/div>

"../vue.js"

>

<

/script>

vue.

component

('component-a',}

, template:`}`

}) vue.

component

('component-b',}

, template:`}`

})var vm1 =

newvue()

var vm2 =

newvue()

<

/script>

區域性註冊:
>

/h3>

<

/component-a>

<

/component-b>

<

/div>

>

/h3>

<

/component-a>

<

/component-b>

<

/div>

"../vue.js"

>

<

/script>

var componenta =},

template:`}`

}var componentb =},

template:`}`

}var vm1 =

newvue(}

)var vm2 =

newvue(}

)<

/script>

注意區域性註冊的元件在其子元件中不可用。例如,如果你希望 componenta 在 componentb 中可用,則你需要這樣寫:

var componenta =

var componentb =

,// ...

}

或者如果你通過 babel 和 webpack 使用 es2015 模組,那麼**看起來更像:

// componentb元件:

import componenta from

'./componenta.vue'

export

default

,// ...

}

對比vue的admin-master專案,eg:

全域性註冊svg-icon元件:

// main.js中:

import svgicon from

'@/components/svgicon'

// 註冊全域性svg-icon元件

vue.

component

('svg-icon'

, svgicon)

// 使用:

"icon"

>

<

/svg-icon>

區域性註冊card-title元件:

import cardtitle from

'@/components/cardtitle'

export

default,}

// 使用:

"title" v-if=

"title"

:icon=

"icon"

>

<

/card-title>

模組系統中-註冊方式

模組系統中,區域性註冊

例如,在乙個假設的 componentb.js 或 componentb.vue 檔案中:

import componenta from

'./componenta'

import componentc from

'./componentc'

export

default

,// ...

}

現在 componenta 和 componentc 都可以在 componentb 的模板中使用了。

模組系統中,基礎元件的自動化全域性註冊

import vue from

'vue'

import upperfirst from

'lodash/upperfirst'

import camelcase from

'lodash/camelcase'

const requirecomponent = require.

context

(// 其元件目錄的相對路徑

'./components'

,// 是否查詢其子目錄

false

,// 匹配基礎元件檔名的正規表示式

/base[a-

z]\w+\.

(vue|js)$/

)requirecomponent.

keys()

.foreach

(filename =>

)

例子:

admin-master專案

基礎5 註解詳解(元件註冊)

bean表示乙個方法例項化 配置或者初始化乙個spring ioc容器管理的新物件。component自動被comonent掃瞄。表示被註解的類會自動被component掃瞄。repository用於持久層,用來表示乙個持久層bean,即資料訪問層dao元件。spring mvc採用經典的三層分層控...

Vue深入了解元件(三) 自定義事件

監聽事件和prop屬性名稱方面不太一樣,prop屬性名若是駝峰命名,在元件呼叫賦值的時候需要改為key base的樣式,但是監聽事件的不會,寫啥是啥。元件中的觸發 this emit myevent 呼叫時的監聽 沒有效果 dosomething my component 有效果的 dosometh...

flask路由註冊的深入了解

1.利用裝飾器來註冊 def hello return hello flask 2.利用flask自帶的add url rule註冊 def hello return hello flask 兩個方法的實質都是通過呼叫add url rule方法來實現 下面看看裝飾器的內部 def route se...