VUE 的坑你踩过几个

栏目: IT技术 · 发布时间: 4年前

喜欢我的话,点击上方 蓝色 文字关注吧:point_up_2:

不喜欢看文字的同学,点击下方:point_down: 绿色按钮 ,竖起耳朵:ear:听吧 VUE 的坑你踩过几个

有时候我们踩坑,是因为一些知识点不知道,按照我们自己的逻辑思维,认为应该是这样,但结果并没有按照我们想要的输出,这个时候,我们就掉坑里了。

坑一

data里的数据是对象类型,并且有多维,需要都写出来 。比如:

export default {

data() {

return {

list:{

stu1:{

name:""

},

stu2:{

name:""

}

}

}

}

}

如果我们只写list,程序就会报错。比如下面的写法就会报错:

export default {

data() {

return {

list:{}

}

}

}

如果只有一维的话,上面的写法是没问题的。

坑二

在给一个对象添加新属性的时候,我们需要用 $set ,否则,新添加的属性不是响应式的。也就是JS数据变了,模版里并没有变。比如:

<div>{{test.id}}</div>

<div>{{test.name}}</div>


export default {

data() {

return {

test : {'name':'刘小妞'}

}

},

mounted() {

this.test.id = "123"

console.log(this.test)

}

}

我们会发现模版里并没有显示出来id值,但是,console打印test,发现是有id值的。如下图:

VUE 的坑你踩过几个

这是因为Vue检测不到数组和对象的变化,响应式的数据必须在data对象上存在。但是,有时候我们需要给对象或者数据添加或者删除一些属性。为了解决这个问题,可以用VUE的set方法。把上面赋值代码改成如下:

mounted() {

this.$set(this.test, 'id', "123")

}

这样,id就是响应式的了,模版里就会显示出id的值了。

$set三个参数:

第一个:添加属性的对象;

第二个:添加的属性;

第三个:添加的属性值;

坑三

组件传值,父组件传给子组件的值,需要调用接口返回。在子组件的mounted和created里打印接收的值为空。

这是因为,调用接口的数据是异步的,父组件传给子组件值的时候,接口数据还没返回来。但是, mountedcreated 只执行一遍,当接口数据返回的时候, mounted created 已经执行完了,不会再执行了,所以,打印的数据是空的。

有时候,子组件接收的数据我们需要处理一下,那怎么办呢?

我们可以用 watch。

watch是用来监听数据变化的

我们可以在watch里监听父组件传过来的值。比如:

export default {

props:{title:String},

watch:{

//当title发生变化时,这个函数就会执行

title: function(newVal,oldVal){

//newVal是变化后的值

//oldVal是变化前的值

console.log(newVal)

}

}

}

坑四

组件传值的时候,如果传的是字符串或者数字,我们在子组件里修改接收到的值,父组件里相应的值不会跟随改变,但是,如果传的是对象或者数组的话,当我们在子组件修改相应的值时,父组件里相应的值也跟随改变。

这是因为数字、字符串和对象、数组在创建的时候,原理是不一样的。这个我们在《聊聊对象(语音版)》这篇文章里做过详细的介绍。

有时候,我们希望改变子组件接收的值,但是,父组件里并不跟随改变。

这个怎么办呢?可以这样处理一下组件传的值。写个例子:

//父组件

<div>

{{test.name}}

</div>

<C1 :test="JSON.parse(JSON.stringify(test))" />


export default {

data() {

return {

test : {'name':'刘小妞'},

}

}

}


//子组件

<div>

{{test.name}}

</div>


export default {

props:{test:Object},

created: function () {

this.test.name = "刘小妞的栖息地"

}

}

VUE 的坑你踩过几个

往期 精彩 回顾

VUE组件之间的通信(语音版)

VUE兄弟组件之间的通信(语音版)

Nuxt部署的坑


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从0到1

从0到1

彼得·蒂尔、布莱克·马斯特斯 / 高玉芳 / 中信出版股份有限公司 / 2015-1-1 / CNY 45.00

图书简介: http://v.youku.com/v_show/id_XOTA0NjcyMzE2.html?wm=3333_2001 硅谷创投教父、PayPal创始人作品,斯坦福大学改变未来的一堂课,为世界创造价值的商业哲学。 在科技剧烈改变世界的今天,想要成功,你必须在一切发生之前研究结局。 你必须找到创新的独特方式,让未来不仅仅与众不同,而且更加美好。 从0到1,......一起来看看 《从0到1》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换