組件化的思想
將一個頁面中的處理邏輯放在一起，處理起來就會很復雜，不利于后續管理和擴展，
如果將頁面拆分成一個個小的功能塊，每個功能塊實作自己的內容，之后對頁面的管理和維護就變得很容易了，
注冊組件的基本步驟
1.創建組件構造器
2.注冊組件
3.使用組件
//創建組件構造器物件
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"
<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(){}
為什么組件中data必須是函式
組件是一個封閉的空間，每一個組件實體都有自己的狀態
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140526.html
標籤：JavaScript
上一篇：仿美團--詳情頁與購物車開發
下一篇：JavaScript 物件基礎