喜欢我的话,点击上方 蓝色 文字关注吧:point_up_2:
不喜欢看文字的同学,点击下方:point_down: 绿色按钮 ,竖起耳朵:ear:听吧 。
有时候我们踩坑,是因为一些知识点不知道,按照我们自己的逻辑思维,认为应该是这样,但结果并没有按照我们想要的输出,这个时候,我们就掉坑里了。
坑一
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检测不到数组和对象的变化,响应式的数据必须在data对象上存在。但是,有时候我们需要给对象或者数据添加或者删除一些属性。为了解决这个问题,可以用VUE的set方法。把上面赋值代码改成如下:
mounted() {
this.$set(this.test, 'id', "123")
}
这样,id就是响应式的了,模版里就会显示出id的值了。
$set三个参数:
第一个:添加属性的对象;
第二个:添加的属性;
第三个:添加的属性值;
坑三
组件传值,父组件传给子组件的值,需要调用接口返回。在子组件的mounted和created里打印接收的值为空。
这是因为,调用接口的数据是异步的,父组件传给子组件值的时候,接口数据还没返回来。但是, mounted 和 created 只执行一遍,当接口数据返回的时候, 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兄弟组件之间的通信(语音版)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。