什么是组件化
将一个页面拆分成小的模块,每个模块完成独立的功能,然后将模块组成一个完整的页面,在vue中vue提供了一-种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。vue中任何的应用都会被抽象成一-颗组件树。
![](https://img.haomeiwen.com/i24639563/f5947bc44f5d3119.png)
组件分为三个步骤
①创建组件构造器 Vue.extend创建组件
Vue.extend里也可以放组件,就是注册子组件 ,Vue.extend({template: ``,components: {con111: com2}})
②注册组件 分为局部注册,全局注册。
Vue.component()注册组件是全局组件,多个vue实例都可以使用。局部组件是实例中写, new Vue({el: '#app',components: { comm: com}
③使用组件
![](https://img.haomeiwen.com/i24639563/7e7de2b88e844e7e.png)
父子组件
定义父子组件之间,在组件构建器里使用components注册子组件
![](https://img.haomeiwen.com/i24639563/cd64995bcc95a69a.png)
注意
我们在实际开发中一般只有一个vue实例,这实例其实也算一个组件,被称为根组件
爷组件是不可以直接调用孙组件使用的,需要在爷组件重新注册为子组件,这是因为vue在加载时已经把组件编译完成
组件模板分离写法:①写在script标签中 ②写在template标签中
![](https://img.haomeiwen.com/i24639563/b0d5929496f75ee7.png)
![](https://img.haomeiwen.com/i24639563/bb34a68a3fb95812.png)
网友评论