之前一直使用react开发,所以响应式开发过程特别是在父子组件传值的过程不需要考虑很多问题 ,可在vue中很多问题变得似乎很麻烦例如下面的问题:
父子组件传值的过程vue和react是一样的
父给子传:用props
子给父传:子组件在特定的事件emit一个信号和所传值,在父组件定义方法接收并作出想要的改变。
子给父传值是发射一个信号所以没什么问题,问题在于 父给子传的时候: 如果是一个传值并不会改变页面中的变量的时候,也就是这个传的值并没有在页面用插值表达式或者别的方式直接展示界面用到,而只是单纯的想要传递一个值的时候,可能这个变量会在哪个函数中调用一下,这个值在父组件改变的时候,子组件不会响应式改变!
所以该怎么办: react似乎是没有这个问题的 (好久没敲了 忘了是否有这个问题 但只记得当时没这个坎)
vue的解决办法是监听 用watch监听 监听父组件传值是否变化了 变了调用那些函数 例如echarts的生成函数等 这是vue的解决办法
总结: vue中父子组件单纯传值的时候 这个值不是会直接改变页面 没有在页面中调用的时候 而是在子组件的函数中有调用 如果想做出响应式改变 需要用watch监听父组件传的值 再在watch中调不同函数改变。
当然还可以用vuex和bus 但是如果你想建立一个架构完整 不混杂的项目工程 不要轻易引用各种各样的插件。
另外一个小知识点 vue 的watch中对每一个变量监听的时候 别用箭头函数 this是找不到vue实例的 ,要用function