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部署的坑


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

查看所有标签

猜你喜欢:

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

How to Build a Billion Dollar App

How to Build a Billion Dollar App

George Berkowski / Little, Brown Book Group / 2015-4-1 / USD 24.95

Apps have changed the way we communicate, shop, play, interact and travel and their phenomenal popularity has presented possibly the biggest business opportunity in history. In How to Build a Billi......一起来看看 《How to Build a Billion Dollar App》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

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

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具