目錄

1.組件定義

2.組件注冊(cè)

(1)?全局組件

?(2)?局部組件

?3.組件名

4.組件復(fù)用

5.自閉合組件

6.組件的 data 選項(xiàng)

---

1.組件定義

組件是可復(fù)用的Vue實(shí)例，可以作為自定義的元素使用。作為一個(gè)Vue實(shí)例，它可以接收與new Vue相同的選項(xiàng)，如data、computed、watch、methods以及生命周期鉤子等，但是不能接收 el 這樣根實(shí)例特有的選項(xiàng)。

【注】每個(gè)組件必須只有一個(gè)根元素，當(dāng)模板的元素大于1時(shí)，可以將模板的內(nèi)容包裹在一個(gè)父元素內(nèi)

2.組件注冊(cè)

(1)?全局組件

Vue.component( string, function | Object )

利用Vue.component創(chuàng)建的組件是全局注冊(cè)的，也就是說(shuō)它們?cè)谧?cè)之后可以用在任何新創(chuàng)建的 Vue 根實(shí)例的模板中。如下例：

<div id="app1"><ths-cmp></ths-cmp> </div> <div id="app2"><ths-cmp></ths-cmp> </div> <script>Vue.component('ths-cmp', {template: `<div>我是一個(gè)全局組件</div>`})const vm1 = new Vue({el: '#app1'})const vm2 = new Vue({el: '#app2'}) </script>

?(2)?局部組件

在 component 選項(xiàng)中定義要使用的組件，對(duì)于 components 對(duì)象中的每一個(gè)屬性來(lái)說(shuō)，其屬性名就是自定義元素的名字，屬性值就是這個(gè)組件的選項(xiàng)對(duì)象

div id="app"><ths-cmp></ths-cmp><ths-cmp></ths-cmp> </div> <div id="app1"><ths-cmp></ths-cmp><ths-cmp></ths-cmp> </div> <script>const vm = new Vue({el: "#app",components: {'ths-cmp': {template: `<div>我是局部組件1號(hào)</div>`}}})const vm1 = new Vue({el: '#app1',components: {'ths-cmp': {template: `<div>我是局部組件2號(hào)</div>`}}}); </script>

?3.組件名

組件的命名方式有兩種

短橫線(xiàn)分隔命名（kabab-case）：my-compontent

大駝峰命名（PascalCase）：MyComponent

不管使用哪種命名方法，在引用組件的時(shí)候，都可以使用短橫線(xiàn)分隔命名的組件，另外，使用大駝峰命名的組件，也可以是由每個(gè)單詞首字母大寫(xiě)加短橫線(xiàn)分隔的方式去引用，如下例:

<div id="app"><my-component></my-component><!-- 首字母大寫(xiě)加短橫線(xiàn)分隔也可以引用組件 --><My-Component></My-Component><ths-component></ths-component> </div> <script>// 大駝峰命名Vue.component('MyComponent', {template: `<div>我是一個(gè)大駝峰命名的組件</div>`})// 短橫線(xiàn)分隔命名Vue.component('ths-component',{template:`<div>我是一個(gè)短橫線(xiàn)分隔命名的組件</div>`})const vm = new Vue({el: "#app"}) </script>

【注】W3C規(guī)范中的自定義組件名（字母全小寫(xiě)且必須包含一個(gè)連字符）

4.組件復(fù)用

<div id="app"><ths-component></ths-component><ths-component></ths-component><ths-component></ths-component> </div> <script>Vue.component('ths-component', {template: `<div>我是一個(gè)組件</div>`})const vm = new Vue({el: "#app"}) </script>

5.自閉合組件

在單文件組件、字符串模板和JSX中沒(méi)有內(nèi)容的組件應(yīng)該是自閉合的，但在DOM模板中不可以這樣。

自閉合組件表示它們不僅沒(méi)有內(nèi)容，而且刻意沒(méi)有內(nèi)容。其不同之處就好像書(shū)上的一頁(yè)白紙對(duì)比貼有“本頁(yè)有意留白”標(biāo)簽的白紙。而且沒(méi)有了額外的閉合標(biāo)簽，你的代碼也更簡(jiǎn)潔。

不幸的是，HTML并不支持自閉合的自定義元素——只有官方的“空”元素。所以上述策略?xún)H適用進(jìn)入 DOM 之前的 Vue 的模板編譯器能夠觸達(dá)的地方，然后再產(chǎn)出符合 DOM 規(guī)范的 HTML。

6.組件的 data 選項(xiàng)

組件中的 data 選項(xiàng)是一個(gè)函數(shù)，每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，如下例

<div id="app"><button-component></button-component><button-component></button-component><button-component></button-component> </div> <script>Vue.component('button-component', {data() {return {count: 0}},template: `<button @click="count ++">點(diǎn)擊了{(lán){count}}次</button>`})const vm = new Vue({el: "#app"}) </script>

?

總結(jié)

以上是生活随笔為你收集整理的Vue_组件基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。