组件化开发

over
190 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情

  1. 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

  1. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。

vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

  1. vue 组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

 template -> 组件的模板结构

 script -> 组件的 JavaScript 行为

 style -> 组件的样式

截图 (8).png

image.png 其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

3.1 template

vue 规定：每个组件对应的模板结构，需要定义到

image.png 注意：

 template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素

 template 中只能包含唯一的根节点（就是templement下的外层只能有一个div或者是其他标签，不能同时存在两个并列的标签），结构如下：

//1.此方法是正确的
<templement> 
<div> 
<div>
</div> 
</div> 
</templement>
//2.此方法是错误的 div不能并列
<templement> 
<div>
</div>
<div>
</div>
</templement>

.2 script

vue 规定：开发者可以在

image.png .vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。

因此在组件中定义 data 数据节点时，下面的方式是错误的：

image.png 会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：

cn.vuejs.org/v2/guide/co…#data-必须是一个函数

.vue 组件中的 data 为什么必须是函数

data：{}是一个对象，里面存放着很多数据，都是指向同一个地址。 如果重复的使用相同的当前组件，每一个组件用的值都是从这个data:{}对象中取得（也就是说都是从同一个地址中取值），就对组件之间造成了相互干扰。 同理，我们就可以知道组件中的data(){}使用函数然后返回一个对象的话，就不会存在这个问题了，因为在创建不同组件的时候，会return出不同地址的对象，并不存在干扰组件之间的数据绑定之类的问题

3.3 style

vue 规定：组件内的

image.png 在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

image.png 4.1 使用组件的三个步骤（父子组件/一把组件） 步骤1：使用 import 语法导入需要的组件

image.png 步骤2：使用 components 节点注册组件

image.png 步骤3：以标签形式使用刚才注册的组件

image.png 自定义组件的方式：

image.png 4.2 通过 components 注册的是私有子组件

例如：

在组件 A 的 components 节点下，注册了组件 F。

则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

请大家思考两个问题：

① 为什么 F 不能用在组件 C 中？

② 怎样才能在组件 C 中使用 F？

4.3 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

自动闭合标签组件：auto close tag

image.png 5. 组件的 props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！

它的语法格式如下：

image.png 5.1 props 是只读的

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：

image.png 要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

image.png 2 props 的 default 默认值

在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：

image.png 5.3 props 的 type 值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：

image.png 5.4 props 的 required 必填项

在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代

码如下：

image.png 5.5 父向子传值的步骤：

  1. 在子组件中设置接收的props：{}对象的值

image.png

image.png 2.将第一步中设置的值动态的绑定到子组件中要操作的地方

image.png

image.png 3. 在父组件中调用并动态绑定子组件中定义的props的属性值

image.png 5.6 子组件向父组件传值的步骤：自定义事件

1.在子组件中自定义一个事件 ：@change="fullChange"，使用this.$emit方法传递事件方法名和值，并使用@change事件将其绑定到所要操作的地方

image.png

image.png 2.在父组件中调用子组件中绑定事件中的this.$emit('方法名',e.target.checked)方法名；如下代码中的：@full-change，并将这个事件所传过来的数据用一个方法接收

         <Footer :isFull="fullState" @full-change="getFullState">

  1. 在父组件的方法（methods{}）中定义一个方法：getFullState(val){}，用来接收子组件中穿过来的数据
//接收Footer子组件传递过来的全选按钮的状态       
getFullState(val) {        
console.log(val);        
this.list.forEach(item => (item.goods_state = val))       }
  1. 组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：

① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的

② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

image.png 6.2 style 节点的 scoped 属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

image.png 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/

image.png 7.自动提示插件

image.png 在setting.json中配置以下代码

//导入文件时是否携带文件的扩展名 
"path-autocomplete.extensionOnImport":true,
//配置@ 的路劲提示 
"path-autocomplete.pathMappings":{ "@":"${folder}/src" }
avatar
文章
阅读
粉丝