vue组件中传值的两种方式

108 阅读1分钟

1.使用provide与inject传值

image.png

父亲用provide传msg给给子级 子级用inject接受传过来的值

这种传值方式的特点:

可以父传子 也可以爷爷传孙子  可以向下传递

不可以兄弟之间传值,兄弟传值建议使用事件总线的方式。

注意:当res的值是异步获取的时候,传值要用回调函数的方式

image.png

2.事件总线的方式传值 利用事件总线方式实现兄弟组件传值:

第一步:

在main.js上new 出一个新的vue实例化对象,挂载到当前使用的vue的原型上并起个属性名叫$bus,见下图

image.png

第二步:

image.png

第三步:

image.png

总体来看步骤:

image.png

注意点:组件加载顺序,注意这里是两个组件都在mounted里面触发方法的

image.png

在app.vue中组件的加载是异步的:

image.png

image.png