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