vue的组件化开发
在我们以前开发前端的时候,把所有的业务都放在了一起,这样做,不管是我们后期的维护还是扩展,都显得含麻烦,也不利于我们的代码重复使用。组件化开发模式也就是为了解决这种麻烦,把我们的复杂业务代码,抽离成一个个组件,当我们需要开发一个页面时,我们就可以直接引入这个组件,直接使用即可!。
1.初步使用vue的组件
注册组件的三个步骤
1.创建组件构造器:
template:代表模板,就是以后你要在页面上显示的html模板代码
/*创建组件构造器*/
const cpn = Vue.extend({
template: `
<div>
<h2>我是组件的标题</h2>
<p>我是组件的内容</p>
</div>
`
});
2.注册组件:
参数1:你给这个组件起的名称,在页面就可以直接把这个当作标签来时用
参数2:上边你创建的组件构造器对象
/*注册组件*/
Vue.component('my-cpn',cpn);
3.使用组件:注意,组件必须要写在挂载在vue的标签下,否则不生效
<div id="app">
<my-cpn></my-cpn>
</div>
这种方式,是组件化开发最原始的使用方式,在后期不会使用这种方式,而是使用更简便的语法糖方式开发
2.全局组件和局部组件
当我们通过调用Vue.component()注册组件时,组件的注册是全局的
这意味着该组件可以在任意Vue示例下使用。
如何创建局部组件:
1.创建组件构造器:
/*创建组件构造器*/
const cpn = Vue.extend({
template: `
<div>
<h2>我是组件的标题</h2>
<p>我是组件的内容</p>
</div>
`
});
2.在vue实例中创建组件
const vue = new Vue({
el: "#app",
data: {},
/*使用这个对象,创建组件,创建出来的组件只能被挂载在这个实例上的标签内使用*/
components:{
"my-cpn": cpn
}
})
3.父子组件
我们知道vue的组件化就是把一个应用的所有内容,抽历成一个个的组件,最终形成一个组件树,那么我们肯定要用到父子组件。
<script>
/*创建一个子组件*/
const chile = Vue.extend({
template:`
<div>
<h1>我是子组件的标题</h1>
<a href="http://www.baidu.com">点我</a>
</div>
`
})
/*创建一个父组件*/
const fu = Vue.extend({
template:`
<div>
<h1>我是父组件的标题</h1>
<chile></chile>
</div>
`,
<!--父组件创建局部的子组件,就可以在父组件的标签内使用了-->
components:{
"chile":chile
}
})
const vue = new Vue({
el: "#app",
data: {},
<!--跟组件引入父组件,在引入父组件的时候,父组件就已经编译好了-->
components: {
"my-cpn":fu
}
})
</script>
注意:使用父子组件时,要在每一个模板上都要有一个根标签,否则会报错。在我们引入父组件时,父组件已经完成了解析,不存在chile的标签了,最终使用父组件时,父组件就已经把子组件的内容引入到自己的里面了。
4.创建组件语法糖
上边创建组件很麻烦,vue为我们提供了创建组件的语法糖
全局组件语法糖:
省去了extend注册组件构造器的步骤
语法:
Vue.component(标签名,{
template:html模板代码
})
局部组件的语法糖
语法:
const vue = new Vue({
el: "#app",
data: {},
/*局部组件的语法糖*/
components:{
"标签名":{
template:`
html模板代码
}
}
})
我们还可以再把template抽取成一个对象,就会更简洁:
<!--<template id="mytem">
<a>haha</a>
</template>-->
<script type="text/x-template" id="mytem">
<a>点我</a>
</script>
以上两种方式都可以抽离模板代码,在需要使用的地方,根据id来匹配即可
全局
Vue.component("my-cpn",{
template:"#mytem"
})
局部
components:{
"my-cpn":{
template:"#mytem"
}
}
5.组件的数据存放
组件是不可以访问我们vue实例中的数据的,组件其实也有一个可以存放数据的地方
模板中使用的数据:
<template id="mytem">
<h1>{{message}}</h1>
</template>
可以在模板对象中,定义data:
components:{
"mycpn":{
template:"#mytem",
/*data: function (){
return {
message: "lala"
}
}*/
data(){
return{
message:'papa'
}
}
}
}
注意:这里的data必须是一个函数,返回值是一个对象,对象中存放我们的数据
6.父传子数据
因为现在是组件化开发,而单独的组件不能从vue实例中直接获取,当我们子组件想要从vue实例中获取值,就需要用到父传子
主要使用的就是这个props属性
props属性可以是一个数组,数组中的字符串就是:xxx的值,一定要加引号
props也可以是一个对象:对象里面可以有更多的功能,检查类型,必传等
子传父
除了父传子这种情况,我们还可能遇到子组件通知父组件用户做了什么事情,这个时候就需要用到子传父:通过事件通知
插槽的使用
当我们使用组件化开发时,有可能不同页面的某个组件很相同,这是我们又不想写很多的组件,这时我们就可以在组件模板上编写一个插槽。
1.当我们使用时如果没有写要顶替的插槽内容,那么就会使用默认的插槽内容
2.我们还可以给插槽起个名字,当我们要顶替那个插槽时,可以指定顶替的插槽,而其他部分不做改变。