由于在vue2.0.x中,父组件传递给子组件的props 不允许在子组件中修改,那么在实际的使用过程中,子组件用来修改父组件传递的props值,一般我们用到的为两种
一种是使用vuex,使用vuex的好处不用多说,vuex打破了组件之间的关系,使得数据可以在整个框架中全局使用,但是某些小的改动如果也使用vuex 那么就会把vuex当做全局变量使用
另一种就是使用$emit
在父组件中 使用v-on绑定事件传递给子组件,然后在子组件中需要改变父组件的值时通过this.$emit
来传递,一般情况下,$emit
并不会有异步时差 也就是 例如1
2
3// props val
this.$emit('update-val', `${val}`)
console.log(this.val) // 可以取到
但是倘若在异步函数中使用emit 那么1
console.log(this.val) // ''
那么面对这种情况怎么解决呢
通过实验
比如从父组件中得到的props为qType1
2
3
4
5
6
7
8
9
10
11props: {
qType: {
type: String,
default: ''
}
}
computed: {
tmpType: function () {
return this.qType
}
}
那么在接下来的异步函数中就可以使用tmpType进行赋值啦,qType仅仅起到了初始化的作用