VueJS组件间传值方式小结

以下先列举出来各个方式,后续会逐一补充代码。

属性传值
最常见的传值方式,可一旦组件嵌套加深,些种方式便显示特别繁琐。
适用场景:待完善

方法回调
安全,数据不易被篡改,但使用越来较为麻烦。
适用场景:待完善

钩子
父组件通过向子组件传入方法钩子,子组件可以直接调用父组件的方法。
适用场景:待完善

通过refs直接调用
在子组件引用时通过ref属性定义一个“对象名”,在需要用过的地方可以直接使用this.$ref.compName来引用子组件内的任何元素,如属性,方法等。
适用场景:待完善

事件传值
特点:使用方便,灵活
弊端:不易维护
适用场景:待完善

状态管理
引入VUEX组件,将需要复用的数据放入全局的状态管理中。
特点:灵活
弊端:使用较为复杂,不易维护,数据可能在任意地方被修改
适用场景:待完善

猜你喜欢

转载自blog.csdn.net/lpw_cn/article/details/84522759
今日推荐