vue父子组件传值与兄弟传值的注意点及爷孙传值

父子组件传值与兄弟传值的注意点及爷孙传值"/>

vue父子组件传值与兄弟传值的注意点及爷孙传值

父传子：

 子接收并使用：

 子改父：

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

第一步：

 第二步：

 vm是vue的实例化对象

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

也可以传入对象：

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

第一步：

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

 第二步：

 

 第三步：

 总体来看步骤：

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

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

 $refs用法 

基本传值方式如图：

 特点：

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

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

下面是孩子向父亲传值，显示失败

 

 如果父级组件的值是动态从接口中获取的

需要把provide改成函数的形式，数据以函数的形式返回，如图：