Vue和ElementUi组件开发遇到的问题

Vue和ElementUi组件开发遇到的问题

一、vue

1. props单向绑定

vue中的props是单向绑定的，父组件的属性变化时会传递给子组件，子组件内部不应改变props的值，否则控制台会给出警告。但如果props的类型为数组或者对象时，在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用，vue不会检测到props发生改变。所以有的情况需要在子组件内部改变父组件的值，可以将属性定义为数组或者对象类型传入。但官方不建议在子组件内改变父组件的值，因为这违反了vue中props单向绑定的思想。

2. 给对象赋值

由1可以引申出，地址引用类型的数据，例如对象obj ={a:1},如果想要修改obj中的a属性，通过obj.a = 2这样赋值，页面不会更新，需使用vue.set方法更改才会起作用：

this.$set (obj,item,value)

同样，如果要给obj增加一个新属性，如果该属性未在data中声明，页面也不会刷新。也就是vue文档中声明的“Vue 不能检测到对象属性的添加或删除”，同样需要使用vue.set方法进行赋值才好使。

3. 深拷贝数组或对象

对象或数组的简单赋值，修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。

对于对象，可以通过newObj = JSON.parse(JSON.stringfy(obj))实现。

对于数组，可以通过newArr = […arr]或者newArr = arr.slice(0)来实现。

https://www.imooc.com/article/70653

4. 给组件增加独有样式

vue中每一个组件都可以自定各自的css样式，如果希望组件内的样式只对当前组件起作用，可以在style标签中增加scoped即可。该写法会让vue在渲染组件的时候给每个元素都增加一个data-v-/版本号/的属性，可以保证只针对有同样data-v-data-v-/版本号/的元素应用该样式。

5. v-for循环key属性

vue中的v-for循环最好加上key属性，否则在高版本(2.2.0+)的vue中控制台会报错。key属性需要唯一，理想的 key 值是每项都有唯一 id，全局不需唯一，但在一个循环中需要唯一。

6. 引用图片

图片引用问题。直接把本地图片地址放在src里没问题。但如果把地址提取出来写在data里或者通过method动态给src赋值则引用不到。因为放在template模板里会被webpack打包所以可以，而放在data或者动态赋值，图片路径只是一个字符串webpack不会处理所以引用不到。解决办法：通过import或者required引入。import src from ‘../../img.png’或者data:{img:require(‘../../img.png’)}

7. 父组件传值

在子组件使用父组件传入的值时，最好复制出一份props的值，通过data或者computed进行赋值。data赋值与computed赋值的区别：data赋值：data:{return {aaa: this.aaa}如果是在data中进行赋值，当父组件的aaa值发生改变时，不会在重新赋给子组件中的aaa。computed赋值：如果想让子组件跟着父组件修改，需要将赋值操作写在computed中。computed:{aaa(){return this.aaa}

https://www.cnblogs.com/cpqwebfe/p/7727715.html

8. 父组件和子组件生命周期（created和mounted顺序）

父组件created

子组件created

子组件mounted

父组件mounted

如果有多个子组件：

父组件created钩子结束后，依次执行子组件的created钩子

多个子组件的created执行顺序为父组件内子组件DOM顺序

多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关

父组件一定在所有子组件结束mounted钩子之后，才会进入mounted钩子。

created是创建的时候就执行。

mounted是构建完成去执行。

父级先创建，然后创建子级，子级没有构建完，父级就要等着。

9. 动态增加class

给元素动态增加class时，可以在模板中通过:class={‘hasClass’: ifHasClass}来实现，当ifHasClass为true时，该元素会自动加上hasClass的样式。动态绑定的class可以与正常写的一起使用<a class=‘aaa’ :class={‘bbb’:isBbb}></a>，但如果在一个元素中使用了两个class则会报错<a class="aaa" class="bbb"></a>。

10. 父组件ajax异步更新数据，子组件props获取不到

应用场景

当父组件axjos获取数据，子组件使用props接收数据时，执行mounted的时候axjos还没有返回数据，而且mounted只执行一次，这时props中接收的数据为空

解决方案：在对应组件中判断数据的长度

<recommend :recommend="recommendList" v-if="recommendList.length"></recommend>

二、ElementUI组件

1.select下拉框和radio单选框，如果要保证数据类型正确，在value前加冒号，没加冒号的后面就是对应的字符串，加冒号的，说明后面的是一个变量或者表达式。

2、使用vue阻止子级元素的click事件冒泡，用stop

3、如果需要在页面上同时显示多个Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

4.要注意的是：prop，正常表单验证单项是依靠prop，但是动态生成话要用：prop。

5. element-ui 的通用样式变量可能无法满足所有定制需求，你可以通过覆盖默认的组件样式的方式实现。 由于 element-ui 的样式我们是在全局引入的，所以你想在某个view里面覆盖它的样式就不能加scoped，但你又想只覆盖这个页面的 element 样式，你就可在它的父级加一个 class，以用命名空间来解决问题。

6、el-form 标签绑定data中的form时候，请使用:model=“form” 而不是v-model=“form”，不然表单校验会不起作用，原因就是el-form的具有自己封装的model属性，表示表单数据对象