四種組件定義方式都存在以下共性(血淚史)

規(guī)則：

1.組件只能有一個(gè)根標(biāo)簽

2.記住兩個(gè)詞全局和局部

3.組件名稱命名中‘-小寫字母’相當(dāng)于大寫英文字母(hello-com 相當(dāng)于 helloCom)

而對(duì)于在HTML中自定義組件的時(shí)候有4種寫法，不過也只是殊途同歸，都是用template屬性對(duì)應(yīng)的只有一個(gè)根標(biāo)簽的HTML代碼。

1.全局組件

定義方式示例：

Vue.component('hello-component',{ props:['message'], template :'<div ><h1>組件定義之全局組件</h1><h4>{{message}}</h4></div>'});

使用

<hello-component message=' global component'></hello-component>

屬性介紹：

Vue.componen()是vue.js內(nèi)部封裝方法'hello-component' 是使用時(shí)候的組件名稱props組件內(nèi)的屬性。供給組件內(nèi)部傳值template組件內(nèi)部DOM元素組成

品鑒

全局組件定義方式，是直接給全局對(duì)象Vue注冊(cè)了一個(gè)組件。在本頁內(nèi)已掛載Vue 實(shí)例的DOM目標(biāo)元素 都可以使用(區(qū)別于局部組件只能是掛載哪一個(gè)DOM，哪個(gè)才能使用)。

2.局部組件

定義方式示例：

var limitComponent = { props:['message'], template :'<div><h1>{{message}}</h1><input type=’text’ v-model=’message’></input></div>'}new Vue ({ el : '#app', components :{ 'child-component': limitComponent }});

使用

<child-component message = '動(dòng)態(tài)局部組件'></child-component>

屬性介紹：

el是 Vue 實(shí)例的掛載目標(biāo)'components' 是注冊(cè)僅在其作用域中可用的組件'child-component'組件的名稱(書寫規(guī)則請(qǐng)上翻再看規(guī)則)limitComponent通過對(duì)象方式傳遞組件

品鑒

你不必把每個(gè)組件都注冊(cè)到全局。你可以通過某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng) components 注冊(cè)僅在其作用域中可用的組件。 js中用反斜線“”’實(shí)現(xiàn)字符串換行

3.Script方式注冊(cè)組件

定義方式示例：

<script type='text/template' id='script-component'> <div > <h2>自定義組件之script方式定義</h2> <h4>{{message}}</h4> </div></script><script> Vue.component('mymac',{ props:['message'], template:'#script-component' }) var newVue = new Vue({ el:'#mac', data:{ mydata:'春暖花開' } });</script>

使用

<div > <input type='text' v-model='mydata' /> <mymac v-bind:message='mydata'></mymac></div>

屬性介紹：

<script type='text/template' id='script-component'>為定義組件的一種寫法，type還可以取的值還可以有：

text/javascript: 說明這一段腳本語言是javascript。告訴瀏覽器這一段要按照javascript來解釋執(zhí)行。在ES5之前的type默認(rèn)值 text/ecmascript:JavaScript和ECMAScript是相同的，只是在名稱上是不同的。但是對(duì)于ecmascript-6而言就可以理解是JS的新語法特性。即HTML5中的默認(rèn)值 application/ecmascript: ie6、7、8都是沒法識(shí)別里面的js語句的 application/javascript: 這個(gè)屬性在IE8以下的瀏覽器中無法被識(shí)別。 text/vbscript: 表示該腳本語言是vb腳本

品鑒

Script定義組件方式筆者覺得就是組件定義方式的另一種寫法。優(yōu)點(diǎn)在于不用寫字符串式HTML代碼。將<script id='XX'>的XX賦值給局部組件或者全局組件都可。

4.<template>創(chuàng)建組件

定義方式示例：

<template id='cc'> <div > <h1>{{message}}</h1> </div> </template><script> Vue.component(’templatec’,{ props:['message'], template:'#cc' }) new Vue({ el:'#MyTemp' })</script>

使用

<div id='MyTemp'> <templatec message ='template組件之Template標(biāo)簽'></templatec></div>

屬性介紹：

<template> 為HTML5發(fā)布后用來聲明是“模板元素”的標(biāo)簽。即HTML5之前使用<script type ='text/template'>方式聲明，而HTML5之后可用<template> 標(biāo)簽

品鑒

<template>定義組件的方式實(shí)際是HTML語法升級(jí)后的<script type ='text/template'>的另一種寫法。同script定義組件一樣，同樣可以配合定義全局/局部組件。

總結(jié)

通篇全文，介紹的四種方式。實(shí)際上只有兩種方式。要不就是全局定義方式，要不就是局部定義方式。另外兩種是為了增加代碼開發(fā)效率將字符串寫法換成標(biāo)簽式書寫方式。

到此這篇關(guān)于Vuejs自定義組件的四種方式的文章就介紹到這了,更多相關(guān)vue 自定義組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！