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

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)淮濱,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

規(guī)則：

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

2.記住兩個詞全局和局部

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

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

1.全局組件

定義方式示例：

Vue.component("hello-component",{
  props:["message"],
  template :"
組件定義之全局組件
{{message}}
"
});

使用

屬性介紹：

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

品鑒

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

2.局部組件

定義方式示例：

var limitComponent = {
  props:["message"],
  template :"
{{message}}
"
}
new Vue ({
  el : "#app",
  components :{
    "child-component": limitComponent
  }
});

使用

屬性介紹：

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

品鑒

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

3.Script方式注冊組件

定義方式示例：

使用

屬性介紹：