元件化的思想
将一個頁面中的處理邏輯放在一起，處理起來就會很複雜，不利于後續管理和擴充。
如果将頁面拆分成一個個小的功能塊，每個功能塊實作自己的内容，之後對頁面的管理和維護就變得很容易了。
注冊元件的基本步驟
1.建立元件構造器
2.注冊元件
3.使用元件
[前端開發]Vue元件化的思想
//建立元件構造器對象
const cpnC = Vue.extend({
template:`
<div>
<h2>hello world</h2>
<p>hi world</p>
</div>
`
})
//注冊元件
Vue.component('my-cpn',cpnC)
//使用元件
<div id="app">
<my-cpn></my-cpn>
</div>
全局元件
可以在多個Vue的執行個體下使用
Vue.component('my-cpn',cpnC)
局部元件
僅可以在目前Vue執行個體下使用
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{
mycpn: cpnC
}
});
父子元件
<script>
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标題</h2>
<p>我是内容，哈哈</p>
</div>
`
})
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标題2</h2>
<p>我是内容2，呵呵呵</p>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{
cpn2: cpnC2
}
});
</script>
元件與元件之間存在層級關系
注冊全局元件 文法糖
Vue.component('cpn1',{
template:`
<div>
<h2>我是标題</h2>
<p>我是内容，呵呵呵</p>
</div>
`
})
注冊局部元件 文法糖
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{
'cpn2' :{
template:`
<div>
<h2>我是标題2</h2>
<p>我是内容2，呵呵呵</p>
</div>
`
}
}
});
省去了調用extend的步驟
元件模闆抽離
1.通過script标簽， type="text/x-template"
type="text/x-template"
<script type="text/x-template" id="cpn">
<div>
<h2>哈哈哈哈哈</h2>
<p>歪比歪比</p>
</div>
</script>
<script>
Vue.component('cpn',{
template: '#cpn'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
1.通過template标簽
<template id='cpn'>
<div>
<h2>哈哈哈哈哈</h2>
<p>歪比歪比</p>
</div>
</template>
<script>
Vue.component('cpn',{
template: '#cpn'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
元件可以通路Vue執行個體的資料嗎？
不能，而且即使可以通路，如果将所有資料都放在Vue執行個體中，Vue執行個體會變得非常臃腫
Vue元件應該有自己儲存資料的地方
<template id='cpn'>
<div>
<h2>{{title}}</h2>
<p>歪比歪比</p>
</div>
</template>
<script>
Vue.component('cpn',{
template: '#cpn',
data(){
return {
title: 'abc'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
data(){}