Vue.js元件基礎
元件基礎
Vue.component(）自定義全域性或者區域性元件，元件間相互獨立且可複用：
vue元件示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="vue.js" charset="UTF-8"></script> </head> <body> <div id="test"> <number-component></number-component> <number-component></number-component> </div> <script type="text/javascript"> Vue.component('number-component',{ data: function() { return { count: 0 } }, template: '<button v-on:click="count ++">You cliced me {{count}} times</button>' }) var pm = new Vue({ el:"#test", data:{ } }) </script> </body> </html>
效果如下，兩個按鈕元件的引數相互獨立：
在這個示例中，number-component為元件名稱。
data 必須是一個函式
當我們定義這個 <number-componentr> 元件時，你可能會發現它的 data 並不是像這樣直接提供一個物件：
data: {
count: 0
}
取而代之的是，一個元件的 data 選項必須是一個函式，因此每個例項可以維護一份被返回物件的獨立的拷貝：
data: function () {
return {
count: 0
}
}
如果 Vue 沒有這條規則，點選一個按鈕就可能會像如下程式碼一樣影響到其它所有例項
通過 Prop 向子元件傳遞資料
rop 是你可以在元件上註冊的一些自定義 attribute。當一個值傳遞給一個 prop attribute 的時候，它就變成了那個元件例項的一個 property。為了給博文元件傳遞一個標題，我們可以用一個 props 選項將其包含在該元件可接受的 prop 列表中：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一個元件預設可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發現我們能夠在元件例項中訪問這個值，就像訪問 data
以下 html 實現了動態傳遞 prop:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<!-- 動態傳遞prop -->
<number-component v-bind:test="post.title" v-bind:key="post.id" v-for="post in posts"></number-component>
<br />
<number-component></number-component>
</div>
<script type="text/javascript">
Vue.component('number-component',{
props:['test'],
data: function() {
return {
count: 0
}
},
template: '<div><button v-on:click="count ++"> {{test}} You cliced me {{count}} times</button></div>'
})
var pm = new Vue({
el:"#test",
data:{
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
</script>
</body>
</html>
單個根元素
當構建一個 <number-componentr> 元件時，你的模板最終會包含的東西遠不止一個標題，所以props 可以包含一個object物件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<!-- 動態傳遞物件給props -->
<number-component v-bind:object="post" v-bind:key="post.id" v-for="post in posts"></number-component>
<br />
</div>
<script type="text/javascript">
Vue.component('number-component',{
props:['object'],
data: function() {
return {
count: 0
}
},
template: '<div><button v-on:click="count ++"> {{object.title}} You cliced me {{count}} times</button></div>'
})
var pm = new Vue({
el:"#test",
data:{
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
</script>
</body>
</html>
元件命名規範
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
當使用 kebab-case (短橫線分隔命名) 定義一個元件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
當使用 PascalCase (首字母大寫命名) 定義一個元件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，儘管如此，直接在 DOM (即非字串的模板) 中使用時只有 kebab-case 是有效的。
元件註冊
全域性註冊
Vue.component('my-component-name', {
// ... 選項 ...
})
區域性註冊
全域性註冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構建系統，全域性註冊所有的元件意味著即便你已經不再使用一個元件了，它仍然會被包含在你最終的構建結果中。這造成了使用者下載的 JavaScript 的無謂的增加。
在這些情況下，你可以通過一個普通的 JavaScript 物件來定義元件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然後在 components 選項中定義你想要使用的元件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
簡單例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<!-- 區域性元件 -->
<config></config>
</div>
<script type="text/javascript">
var pm = new Vue({
el:"#test",
data:{
},
components:{
config:{
template:"<h1>test 區域性元件</h1>"
}
}
})
</script>
</body>
</html>
在模組系統中區域性註冊
如果你還在閱讀，說明你使用了諸如 Babel 和 webpack 的模組系統。在這些情況下，我們推薦建立一個 components 目錄，並將每個元件放置在其各自的檔案中。
然後你需要在區域性註冊之前匯入每個你想使用的元件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 檔案中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
現在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
更詳細的用法參考官方文件：https://cn.vuejs.org/v2/guide/single-file-components.html