从vue文件中抽取出子组件的流程及过程中踩过的坑

流程：

1. 确保注册、引入子组件的正确性：

创建一个新的vue文件，包含基本的template,及export的内容，其中可简单包含空的data函数。暂时先不把子组件中的代码移出。在父组件中import进该子组件的.vue文件，要注意的是路径名要正确，“../”表示的是当前文件所在目录的上层目录，“./”表示的是当前文件夹下。所以，如果子组件和父组件在同一个目录下，只需在父组件中加上：

import ChildComponent from './ChildComponent.vue‘；

引入子组件后，需要在父组件中注册子组件，主需要在父组件的components属性中注册该子组件：

components: {

'child-component': ChildComponent

}

这样就注册成功了，不需要调用new ChildComponent()

2.移出组件相关的template,及method，定义好父组件及子组件的接口：props{}，props在子组件中定义，父组件中传入。父组件中若需传入动态值，则在父组件中可以用v-bind绑定传入的值。

踩过的坑（比较细碎）：

1.属性的绑定问题：

:property="variable"与property="variable"的区别：如果使用v-bind:property则默认后面的值是一个变量，在编译器解析到这句话时，解析器会去data中寻找该变量，而若使用第二种定义的属性的方法，则解析器会默认后面的值为一个字符串。意味着：如果传入一个布尔值，则第一种方法会传入布尔值，第二种只是简单的传入字符串。

2.父组件与子组件的通信接口——props：

定义的props中的各属性需尽量是地位平等的一系列属性，尽量不要将所有属性放入一个对象中传入。因为后者从父组件传入子组件的对象，只要对象中少传了一个值就会报错，而且当传入的是个对象时，维护的成本也会变大，整个代码的复杂度也会增加。可是这次项目中由于这些参数确实都是作为一个整体的，所以就封装成了一个对象进行绑定了，变成对象，坑就多啦。子组件中的props需要定义对象中各属性的类型。

3.子组件向父组件传递数据——$emit：

当子组件中的值发生了改变，或触发了某个事件时，我们需要手动$emit，将变化告知父组件。语法是vm.$emit(event, [args])。然后在父组件中监听该event，然后当监听到该event时，触发父组件中定义的某个方法。在template中绑定这个事件监听时，我们并不需要显示的写出传入的参数的形参，因为在template中直接写出形参，解析器会以为这是已经定义好的变量，会去data中寻找。若寻找不到则会报错。所以，在template中我们只要写：@event = "anotherEvent",然后在methods中定义anotherEvent方法时，写上形参。一定要分清形参和实参！！！

4. 父组件与子组件定义的props需双向绑定的问题（父、子组件的双向绑定并不是必需的，只是本项目中有次需求）：

若需要双向绑定，需在data中也定义需双向绑定的值，然后将props中的值赋值给data中的对应值。然后在template中通过v-model绑定该data值。为什么不在v-model中直接绑定props中的值呢？因为props最好是单项数据流。然后当我们需同时监听data中的对象和props中的对象，可能会导致死循环。因为，我们前提是data中的对象是由props赋给的。所以props值的变化，会导致data的变化，data的变化，又会导致props的变化。

此外，要注意的是，当我们监听的是对象时，直接用watch，是浅层的监听，因为对象本质是只是一个指向内存某个地址的指针，只要地址不变，就不会触发更新，那我们希望对象中的内容变化了，也触发更新，则我们需使用以下方式：

watch: {

propA: {

handler: function(){},

deep: true

}

(props的双向绑定会使得逻辑很复杂，其实也可以使用.sync修饰符，但是该修饰符在Vue 2.0版本中被移除了，但在2.3.0+中又被重新引入了。所以，要使用.sync要先看看package.json中配置的版本)

从vue文件中抽取出子组件的流程及过程中踩过的坑相关推荐

vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
pandas使用extract函数根据正则表达式从dataframe指定数据列的字符串中抽取出数字并生成新的数据列(extract numbers from column)
pandas使用extract函数根据正则表达式从dataframe指定数据列的字符串中抽取出数字并生成新的数据列(extract numbers from column and generate n ...
pandas使用extract函数根据正则表达式从dataframe指定数据列的字符串中抽取出数字(设置expand=false之后返回的为series)、将series转化为dataframe
pandas使用extract函数根据正则表达式从dataframe指定数据列的字符串中抽取出数字(设置expand=false之后返回的为series).把pandas series转化为panda ...
flash中制的SWC组件怎样导入到flex中使用
flash中制的SWC组件怎样导入到flex中使用 2010-04-30 11:18 在使用FLASH导出SWC组件文件后,放入项目的LIB文件夹,然后要用实例化一个对象才能进行时操作使用, 但要记得 ...
图像中的一条直线在旋转缩放过程中会有分段现象，或产生分段节点
图像中的一条直线在旋转缩放过程中会有分段现象. 图像在Windows照片查看器中打开.显示. 使用滚轮放大缩小. 原来的一条直线会分段. 图像旋转方式:16相位(33端).32 原图: 经旋转45,放 ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
vue 关闭弹如何销毁子组件_vue中的eventBus会产生内存泄漏吗
eventBus是在vue中经常用来解决跨组件消息传递的问题,但对它的使用要特别注意,否则会产生很严重的后果. 引入本文介绍了eventBus的实现原理,并介绍它如何在vue中使用,并举了一个具体的 ...
vue子组件mounted不执行_vue中父子组件传值，解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...

从vue文件中抽取出子组件的流程及过程中踩过的坑

从vue文件中抽取出子组件的流程及过程中踩过的坑相关推荐

最新文章

热门文章