[前端开发]Vue组件化的思想
组件化的思想
将一个页面中的处理逻辑放在一起，处理起来就会很复杂，不利于后续管理和扩展。
如果将页面拆分成一个个小的功能块，每个功能块实现自己的内容，之后对页面的管理和维护就变得很容易了。
注册组件的基本步骤
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(){}
