詳解vue元件（一）全域性元件與區域性元件

全域性元件的形式如下：

"childrenone"

>
我是元件a
<
/p>
<
/div>
<
/template>
vue.
component
('children-a',}
,        template:'}'
//也可以直接寫乙個template的id
//template:'#childrenone'
})

其中vue.component 的第乙個引數為元件名，以後可以根據這個元件名在其他地方進行呼叫，而第二個引數大括號裡面放的內容跟我們平時new乙個vue物件裡面放的內容一模一樣，只不過這個裡面的data是乙個函式形式。另外template裡面可以寫html**段，也可以在body裡寫乙個template，增加乙個id,然後在template裡直接寫id名稱。

注：template裡面內容只能用乙個唯一的div包裹住，如果template的兒子元素中有兩個元素，那麼就會報錯。

完整流程

html:

js:

vue.

component
('children-a',}
,        template:'}'
})var vm =
newvue
()

注： 在我測試的來看，vue的全域性元件沒有變數提公升，所以全域性元件要在vue例項前。

var componenta=},

template:'}'
}

區域性元件就是定義乙個普通的物件，物件裡的值與全域性第二個引數裡面的內容是一模一樣的，就是在用的時候，區域性元件需要在vue例項物件裡面註冊一下。

html:（呼叫的話與全域性元件一樣）

>

<
/component-a>
<
/div>
"childrenone"
>
}<
/div>
<
/template>

var componenta=},

template:
'#childrenone'
}var vm =
newvue(}
)

注：

（1）同樣區域性元件也應該寫在vue例項的前面，要不會報錯。

（2）在註冊時也就是要呼叫時候的名字最好都是小寫或者是kebab-case方式。要不也會報錯。

全域性元件與區域性元件除了在定義時，乙個是vue.component乙個是定義乙個物件不太一樣，裡面寫的內容是完全一模一樣的，另外有一點區別就是區域性元件需要註冊一下，而全域性元件不用註冊。再次強調在註冊的時候注意一下名字的規範。最後的呼叫也是一樣的。無論是全域性元件還是區域性元件都沒有變數提公升，建議都把元件寫在vue例項物件的前面

vue全域性元件與區域性元件

vue對元件的定義 元件是可復用的 vue 例項 元件之間是互不影響的，乙個元件的崩潰，並不會影響整個專案的執行。全域性元件 button add button add div src vue.js script 註冊全域性物件，要寫在vue例項的上面 vue.component button ad...

Vue元件之全域性元件與區域性元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的 在較高層面上，元件是自定義元素，vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生 html 元素的形式，以 is 特性擴充套件。個人認為就是乙個可以重複利用的結構層 片...

Vue 元件（一）全域性元件和區域性元件

根據vue官方文件 元件 component 是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的 在較高層面上，元件是自定義元素。按我當前學習程度的理解，元件就是定義乙個自己的新標籤，新標籤可以在html 中使用。全域性宣告元件 vue.component my compon...