vue組件實例：
組件注冊：
// 組件命名推薦字母全小寫且必須包含一個連字符
// 定義組件名的方式有兩種：短橫線分隔命名，引用時也使用短橫線方式；首字母大寫命名，
// 引用時可以短橫線形式引用也可首字母大寫形式引用。
// 組件注冊-全局注冊&局部注冊
// Vue.component('component-name',{...})
/*
var ComponentA = {}
new Vue({
el:'#app',
components: {
'component-a':ComponentA
}
})
*/
ps：局部注冊的組件在其子組件內不可用，若希望ComponentA在ComponentB中可用，則：
/*
var ComponentA = {...}
var ComponentB = {
components: {
'component-a':ComponentA
},
// ...
}
*/
/*
import ComponentA from './ComponentA.vue';
export default {
components: {
ComponentA
},
// ...
}
*/
ComponentA等價於ComponentA：ComponentA
左邊表示用在模板中的自定義元素的名稱；右邊表示包含了這個組件選項的變量名
實例1：
ps：一個組件可以在不同地方多次調用，注意當點擊按鈕時，每個組件都會各自獨立維護它的 count。因為你每用一次組件，就會有一個它的新實例被創建。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<body>
<div id="components-demo1">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script>
Vue.component('button-counter',{
data:function(){
return {
count:0
}
},
template:`<button v-on:click="count++">cliced {{count}} times</button>`
})
new Vue({
el:'#components-demo1'
})
</script>
ps：定義組件時，其data應該返回一個函數，這樣組件多次被調用時每個實例可以維護一份被返回對象的獨立的拷貝。如果data直接返回對象的話，多次調用同一個組件時，點擊一個其他幾個會有共同的反應。
Prop 是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop
實例2：prop，一個 prop 被注冊之后，把數據作為一個自定義特性傳遞進來：
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
Vue.component('blog-post', {
props:['title'],
template:`<h3>{{title}}</h3>`
})
實例3：使用 v-bind 來動態傳遞 prop
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
Vue.component('blog-post', {
props:['title'],
template:`<h3>{{title}}</h3>`
})
new Vue({
el:'#components-demo1',
data:{
posts:[
{id:1,title:'sddd'},
{id:2,title:'fdadsds'},
{id:3,title:'dsddd'}
]
}
})
ps：每個組件必須只有一個根元素。
多個屬性要傳給組件時，若仍使用v-bind一個一個屬性的傳遞會很繁瑣，可以選擇直接整個對象傳過去，
實例4：prop 傳遞對象
<blog-post-new
v-for="post in posts"
v-bind:key='post.id'
v-bind:post='post'
></blog-post-new>
Vue.component('blog-post-new',{
props:['post'],
template:`
<div class="blog-post-new">
<h3>{{post.title}}</h3>
<div v-html="post.content"></div>
</div>
`
})
new Vue({
el:'#components-demo1',
data:{
posts:[
{id:1,title:'sddd'},
{id:2,title:'fdadsds'},
{id:3,title:'dsddd'}
]
}
})
實例5：通過slot插槽分發內容
<alert-box>
something good happened.
</alert-box>
Vue.component('alert-box', {
template:`
<div>
<strong>oH yeah </strong>
<slot></slot>
</div>
`
})
實例6：動態切換組件
通過 Vue 的 <component> 元素加一個特殊的 is 特性來實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
<style>
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="dynamic-component-demo" class="demo">
<button
v-for="tab in tabs"
v-bind:key='tab'
v-bind:class="['tab-button',{active:currentTab === tab }]"
v-on:click="currentTab=tab"
>{{ tab }}</button>
<!-- 在一個多標簽的界面中使用 is 特性來切換不同的組件 -->
<!-- 我們更希望那些標簽的組件實例能夠被在它們第一次被創建
的時候緩存下來。為了解決這個問題，我們可以用一個 <keep-alive> 元素將其動態組件包裹起來。 -->
<keep-alive>
<component
v-bind:is="currentTabComponent"
class="tab"
></component>
</keep-alive>
</div>
<script>
Vue.component('tab-home', {
template:'<div>Home component</div>'
})
Vue.component('tab-posts', {
template:`<div>Posts component</div>`
})
Vue.component('tab-archive', {
template:`<div>Archive component</div>`
})
new Vue({
el: '#dynamic-component-demo',
data: {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
},
computed: {
currentTabComponent:function(){
return 'tab-' + this.currentTab.toLowerCase()
}
}
})
</script>
</body>
</html>
參考 & 感謝：vue官網 & 各路大神