Vue组件传参

  • Vue组件传参一共有三种类型,即父向子传参,子向父传参,兄弟之间传参(只要不是父子关系就都是兄弟组件)

1.父向子传参:

父组件向子组件共享数据需要使用自定义属性----props
比如我们有父组件 Father 和 子组件 Son。如果需要父向子传参时,则需要在子组件Son中添加一个props(与data平级)。在props中可以添加自定义属性,属性名自己取。比如fromfather:{default:0, type:Number} 传参时只需要在父组件中使用子组件 这里使用的属性名必须与子组件中props上定义的一样

2.子向父传参

子组件向父组件共享数据使用自定义事件
在子组件Son的methods中定义一个方法,其中有this.$emit('自己定义的方法名', 要传的数据)


Vue组件传参_第1张图片

 3.兄弟组件之间传参

兄弟组件之间数据共享的方案是 eventBus
创建个eventBus.js模块 向外共享一个Vue实例对象
在数据发送方导入eventBus.js 调用bus.e m i t ( ′ 事 件 名 ′ , ′ 要 发 送 的 数 据 ′ ) 方 法 触 发 自 定 义 事 件 在 数 据 接 收 方 导 入 e v e n t B u s . j s , 调 用 b u s . emit('事件名', '要发送的数据')方法触发自定义事件 在数据接收方 导入eventBus.js ,调用bus.emit( ′事件名 ′ , ′要发送的数据 ′ )方法触发自定义事件在数据接收方导入eventBus.js,调用bus.on(‘事件名’, ‘事件处理函数’)方法注册一个自定义事件

Vue组件传参_第2张图片

 

 

你可能感兴趣的:(vue.js,前端,javascript,开发语言,前端框架)