十 元件註冊

2021-10-05 06:32:59 字數 2208 閱讀 8989

(1.)全域性元件註冊

// 1.template寫在div中通過template:'#compnenta'

>

<

/componenta>

<

/div>

"componenta"

>

this is component!

<

/div>

<

/template>

vue.

component

('componenta',}

, methods:})

newvue()

<

/script>

// 2.template為模板字串

>

<

/componenta>

<

/div>

vue.

component

('componenta',}

, template:

`,methods:})

newvue()

<

/script>

(2.)區域性元件註冊
var componenta =

newvue(}

)

>

<

/component-three>

<

/component-two>

<

/component-one>

<

/div>

"componentone"

>

componentone!

!<

/h1>

<

/template>

"componenttwo"

>

componenttwo!

!<

/h1>

<

/template>

"componentthree"

>

componentthree!

!<

/h1>

<

/template>

// 定義區域性元件

var componenta =},

template:

"#componentone"

}var componentb =},

template:

"#componenttwo"

}var componentc =},

template:

"#componentthree"

}new

vue(

,// 在components選項中定義想使用的元件

components:})

<

/script>

var componenta =},

template:

"#componentone"

}var componentb =

,// ...

}

模組元件
import componenta from

'./componenta'

import componentc from

'./componentc'

export

default

,// ...

}

基礎元件自動化全域性註冊
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 =>

)

Angular4學習筆記(十) 元件間通訊

如下 message.service.ts import from angular core import from rxjs injectable export class messageservice private subject new subject sendmessage somethi...

012 元件註冊

元件,自定義元素。可以拓展html元素,封裝重複可用的 提高 復用率。所有的vue元件例項都是vue的例項,因此他們擁有和頁面相同的宣告週期鉤子函式 一 全域性註冊 1 編寫元件 tema.vue 全域性元件註冊 div template 2 註冊 在入口檔案main.js中 import tema...

Vue 3 元件註冊

上一節實驗中,我們大概了解了一下元件的基礎,這一節實驗我們要深入元件註冊。我們在註冊元件的時候,我們都會給元件起乙個名字,就好像我們人的名字一樣。需要注意的是,我們的元件名字是有一些規範的,一般這種單檔案元件,我們強烈推薦使用字母全小寫且必須包含乙個連字元,全部小寫字母,單詞使用中華線 隔開。例如我...