简述下Vue组件化封装过程?

  1. 云栖社区>
  2. 博客>
  3. 正文

简述下Vue组件化封装过程?

会用水魔法的火神 2019-09-11 14:15:03 浏览424
展开阅读全文

概念

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:

img

!!! 熟记 : 页面中可复用的结构、样式和功能,抽离成一个文件;

特点: 为了便于 组织和管理代码 , 便于维护和扩展维护

组件化和模块化的不同:

模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的前端的组件化方便组件的重用;

全局组件

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

1. 注册

Vue.component('MyDemo'{
template:`<div>这个的全局组件的注册</div>`
})

2.实例化 Vue

var vm = new Vue({
el:'#app',
})

3. 使用组件

<div id="app">
<my-demo></my-demo>
</div>

!!!注意事项:

必须先注册才能使用。而且注册要写在实例之前。否则也不能生效。 组件名称不可以使用浏览器支持的标签。如:div,article……

局部组件

通过Vue.component()的方式注册组件,称之为全局注册,即在实例的任何地方都可以使用。

那么全局组件也会带来问题,比如将来我们在项目中注册过全局组件,但是我们后面不再使用它。那么会导致这个无用的全局组件也会被打包到项目中。我们可以通过局部注册的方式来解决这个问题,即需要的时候再来注册组件。

局部组件的注册方式

1.通过普通的 JavaScript 对象来定义组件:

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

var ComponentC = { /* ... */ }

2.在 components 选项中注册你想要使用的组件:

new Vue({
  el: '#app',
  components: {
    ComponentA,
    ComponentB
  }
})

3.使用注意注册在哪里,那么这个组件就只能这里使用

<component-a></component-a>
<component-b></component-b>

注意

这里我们没有将ComponentC注册,那么这里面是不可以使用的。局部组件必须先注册,再使用。否则会报错

网友评论

登录后评论
0/500
评论
会用水魔法的火神
+ 关注