问题一:
vue组件之间传递数据,在子组件中我想改变一个从父组件中传过来的值
这是父组件
1234567891011121314151617181920 <template><div><Child :message= "message"> </Child>< /div></template><script>import Child from './child.vue';export default {data() {return {message: '这是传给子组件的信息',};},components: {Child,},};< /script>这是子组件
123456789101112131415161718192021 <template><div @click= "handleChange">{{message}}< /div></template><script>export default {props: {message: {type: String,default: '这是默认信息',},},methods: {handleChange() {this.message = '我是子组件修改后的信息';},},};< /script>
如果你这样写就会报一下错误
但是在子组件中,我们不要去修改 prop。如果你必须要修改到这些数据,你可以使用以下方法:
- 把 prop 赋值给一个局部变量,然后需要修改的话就修改这个局部变量,而不影响 prop
1234567891011121314151617181920212223242526<template><div @click= "handleChange">{{newMessage}}< /div></template><script>export default {props: {message: {type: String,default: '这是默认信息',},},data() {return {newMessage: this.message,};},methods: {handleChange() {this.newMessage = '我是子组件修改后的信息';},},};< /script>
问题二:
vue中检测不到data的变化,我想把给data中的a赋值一个新的对象(添加一个它本身不存在的属性),然而经过尝试发现直接赋值是行不通的,以下是我做的一下尝试
|
|
|
|
- 上面这样写(给对象a添加一个本来不存在的属性b,并给他赋值)并不会触发watch,
- vue文档中也明确表示添加到对象上的新属性不会触发更新,所以我们应该新建一个新的对象并将这个心对象的值赋值给原有的对象
12345678910111213141516171819export default {data() {return {a: {},};},created() {setTimeout( () => {this.a = {b: 1,};}, 500);},watch: {a(newVal, oldVal) {console.log( `${oldVal}现在变成了${newVal}`);},},};
由此给大家拓展一个对象的一些知识
tips1: js取值的两种方式的区别
|
|
在实际项目中一般使用.会方便很多,但是key是变量的话就不能使用.,js对象会理解变量为对象的key值,
|
|
tips2: 对象深拷贝实现方法
先解释什么是深拷贝和浅拷贝
- 浅拷贝是对对象地址的复制,并没有开辟新的栈,复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,另一个对象的属性也会改变
- 深拷贝是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
最简单的如下(方法一)
|
|
但是会存在一些问题
- 无法复制函数
- 原型链没了,对象就是object,所属的类没了。
使用递归(方法二)
|
|
tips3: 深对比,方法参考 http://stackoverflow.com/questions/1068834/object-comparison-in-javascript
方法一:Object.toJSON()
|
|
|
|
方法二: 深度比较两个对象
|
|
|
|
-
已知问题(他们的优先级很低,可能你永远不会注意到)
-
具有不同原型结构但相同投影的物体
- 函数可能具有相同的文本,但是指的是不同的闭包原型
- 转载http://wangyaxing.top/categories/vue/