Vue中父子之间怎么样子传值的,非父子之间呢?
父-->子
1.pros传值法
父组件代码:
子组件代码:
子-->父
1.emit触发传值法
父组件代码
子组件代码
非父子传值
1.建立中间的事件bus总线
提示:遇到的问题:当我们还在页面first的时候,页面second还没生成,也就是页面second中的 created中所监听的来自于first中的事件还没有被触发。这个时候当你first中emit事件的时候,second其实是没有监听到的
解决方法:我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候,B页面组件已经被created了,也就是我们写的on事件已经触发了,所以可以在beforeDestory的时候,emit事件
而且在最后我们要在在second组件中的beforeDestroy中添加这句 bus.off('get', this.myhandle) 来进行手动销毁on
除了以上的组件传值方式,还有其他的吗?
1.我们可以在子组件中直接通过$parent获取父组件的值或者方法
父组件代码:
子组件代码:
2.我们可以在父组件中直接通过$children获取子组件的值或者方法
子组件代码:
父组件代码:
同时,我们也可以通过$ref来获取子组件中的值或则方法
父组件的代码:
最后我们阐述一下vue中的computed和watch的区别?
computed:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
watch:当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch
computed的写法:
watch的写法: