组件化
如果我们将一个页面所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。降低代码耦合度。
vue组件化思想
组件使用分成三个步骤
①调用Vue.extend()方法创建组件构造器（ES6中继承)
通常在创建组件构造器时，传入template代表我们自定义组件的模板（是以对象的形式），该模板就是在使用到组件的地方，要显示的HTML代码。
②调用Vue.component()方法注册组件
将刚才创建的组件构造器注册为一个组件，并且给他起一个组件的标签名称。
需要传递两个参数：一个时注册组件的标签名，一个是组件构造器
③在Vue实例的作用范围内使用组件
必须在实例范围内使用组件，可以在实例作用范围内嵌套使用。
组件化的基本使用过程
<div id="app">
<cpn></cpn> //3:使用组件
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//1：创建组件构造器对象
const cpncontructor = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
}
)
//2：注册组件
Vue.component('cpn',cpncontructor)
const app= new Vue({
el:'#app',
data:{
message:'nihao',
}
})
</script>
全局组件和局部组件
全局组件意味着可以在多个vue的实例下使用
Vue.component('cpn',cpncontructor);
去固定的Vue实例下注册组件就是局部组件了，实例中components属性
const app = new Vue({
el:'#app',
data:{
message:'你好',
},
components:{
//cpn使用组件时对应的标签名
cpn:cpnconstructor
}
})
父组件和子组件
组件与组件之间存在层级关系，而其中一种非常重要的关系就是父子组件的关系
<div id="app">
<cpn1></cpn1>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const cpn2 = Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容</p>
</div>`
}
);
//cpn2为子 cpn1为父 但是cpn2要在cpn1之前定义
const cpn1 = Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容</p>
<cpn2></cpn2>
</div>`,
components:{
cpn2:cpn2,
}
}
);
const app= new Vue({
el:'#app',
data:{
message:'nihao',
},
components:{
//注册局部组件
cpn1:cpn1,
}
})
</script>
组件语法糖
//全局组件
Vue.component('cpn',{
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容</p>
</div>`
})
//局部组件
const app= new Vue({
el:'#app',
data:{
message:'nihao',
},
components:{
cpn:{
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
} //注册局部组件
}
})
组件模板抽离的写法
text/x-template
script标签 注意：类型必须是text/x-template
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<script src="../js/vue.js"></script>
<script type="text/x-template" id="cpn">
<div>
<h2>我是模板组件分开标题</h2>
</div>
</script>
<script>
//注册全局组件
Vue.component('cpn',{
template:'#cpn', //找到模板的id
});
const app = new Vue({
el:'#app',
})
</script>
template标签
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<script src="../js/vue.js"></script>
<template id="cpn">
<div>
<h2>我是模板组件分开标题</h2>
</div>
</template>
<script>
//注册全局组件
Vue.component('cpn',{
template:'#cpn',
});
const app = new Vue({
el:'#app',
})
</script>
组件data必须是函数
vue实例顶层中的data无法运用于组件当中，必须在注册组件的时候和template模板属性一样有一个data属性，但是data必须是一个函数，函数返回一个对象,对象内部保存着数据。data不能直接保存对象，会报错。
Vue.component('cpn',{
template:'#cpn',
data(){
return {
title:'abc'
}
}
})
组件实例之间共用的不是同一个data数据：
每次data中函数会创建新的块级作用域所以之间的数据互不干扰。
这就是为什么data需要用一个函数来返回对象。
如果就是想共享的话，可以采取以下措施：
const obj = {
counter:0
}
Vue.component('cpn',{
template:'#cpn',
data(){
return obj; //每次调用都是同一个对象
}
})
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
