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

規(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 id="mac" >
  <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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論