在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
父组件模板的内容在父组件作用域内编译；
子组件模板的内容在子组件作用域内编译。
1.父组件给子组件传递数据
vue中使用props向子组件传递数据
1): 子组件在props中创建一个属性,用于接收父组件传过来的值
2): 父组件中注册子组件
3): 在子组件标签中添加子组件props中创建的属性
4): 把需要传给子组件的值赋给该属性
2.子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
1): 子组件中需要以某种方式,例如点击事件的方法来触发一个自定义事件
2): 将需要传的值作为$emit的第二个参数,该值将作为实参数传给相应自定义事件的方法
3): 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听
3.子组件向子组件传递数据
vue中没有直接子组件对子组件传参的方法,建议将需要传递数据所在的组件,都合并为一个组件,如果一定需要子组件对子组件传参,可以先传到父组件,再传到子组件,为了方便开发,vue推出了一个状态管理工具vuex,可以很方便的实现组件之间的参数传递
网友评论