局部組件 Vue里
全局組件 Vue外
Vue.component(tagName, options)
tagName為組件名，options 模板
<tagName></tagName>
props 傳遞組件參數(shù)
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div>
<script>
// 注冊
Vue.component('child', {
// 聲明 props
props: ['message'],
// 同樣也可以在 vm 實例中像 "this.message" 這樣使用
template: '<span>{{ message }}</span>'
})
// 創(chuàng)建根實例
new Vue({
el: '#app',
data: {
parentMsg: '父組件內(nèi)容'
}
})
</script>
props參數(shù)驗證
Vue.component('example', {
props: {
// 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
propA: Number,
// 多種類型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字，有默認值
propD: {
type: Number,
default: 100
},
// 數(shù)組／對象的默認值應當由一個工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
}
})
使用 emit(eventName) 觸發(fā)事件
注冊指令 (便于寫框架)
<div id="app">
<p>頁面載入時，input 元素自動獲取焦點：</p>
<input v-focus>
</div>
<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
// 當綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 創(chuàng)建根實例
new Vue({
el: '#app'
})
</script>
鉤子函數(shù)
- bind: 只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作。
- inserted: 被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于 document 中）。
- update: 被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數(shù)參數(shù)見下）。
- componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用。
- unbind: 只調(diào)用一次， 指令與元素解綁時調(diào)用。
參考鏈接
https://www.runoob.com/vue2/vue-custom-directive.html
router-link
切換頁面
流程
//1. 定義（路由）組件。
const Foo = { template: '<div>foo</div>' }
// 2. 定義路由
const routes = [
{ path: '/foo', component: Foo }
]
// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
const router = new VueRouter({
routes // （縮寫）相當于 routes: routes
})
// 4. 創(chuàng)建和掛載根實例。
const app = new Vue({
router
}).$mount('#app')
