Vue父子组件传值和兄弟传值的注意点

225 阅读1分钟

图片1.png

父传子:

图片2.png

子接收并使用:

图片3.png

子改父:

图片4.png

图片5.png

在父组件操作子组件的dom元素

第一步:

图片6.png

第二步:

图片7.png

vm是vue的实例化对象

图片8.png

使用.sync语法糖的形式 子组件改变父组件传过来的值:

图片9.png

也可以传入对象:

图片10.png

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

第一步:

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

图片11.png

第二步:

图片12.png

图片13.png

第三步:

图片14.png

总体来看步骤:

图片15.png

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

图片16.png

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

图片17.png

图片18.png

————————————————某站关注“张sir手摸手带你学前端”~不定时直播现场撸干货