組件化的思想 將一個頁面中的處理邏輯放在一起，處理起來就會很複雜，不利於後續管理和擴展。 如果將頁面拆分成一個個小的功能塊，每個功能塊實現自己的內容，之後對頁面的管理和維護就變得很容易了。 註冊組件的基本步驟 1.創建組件構造器 2.註冊組件 3.使用組件 //創建組件構造器對象 const cpn ...
組件化的思想
將一個頁面中的處理邏輯放在一起，處理起來就會很複雜，不利於後續管理和擴展。
如果將頁面拆分成一個個小的功能塊，每個功能塊實現自己的內容，之後對頁面的管理和維護就變得很容易了。
註冊組件的基本步驟
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(){}
