美文网首页
vue组件通信(父子)

vue组件通信(父子)

作者: xiaolizhenzhen | 来源:发表于2018-05-30 16:12 被阅读0次

    在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。

    父组件模板的内容在父组件作用域内编译;
    子组件模板的内容在子组件作用域内编译。

    1.父组件给子组件传递数据

    vue中使用props向子组件传递数据

    1): 子组件在props中创建一个属性,用于接收父组件传过来的值
    2): 父组件中注册子组件
    3): 在子组件标签中添加子组件props中创建的属性
    4): 把需要传给子组件的值赋给该属性
    

    2.子组件向父组件传递数据

    子组件主要通过事件传递数据给父组件

    1): 子组件中需要以某种方式,例如点击事件的方法来触发一个自定义事件
    2): 将需要传的值作为$emit的第二个参数,该值将作为实参数传给相应自定义事件的方法
    3): 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听
    

    3.子组件向子组件传递数据

    vue中没有直接子组件对子组件传参的方法,建议将需要传递数据所在的组件,都合并为一个组件,如果一定需要子组件对子组件传参,可以先传到父组件,再传到子组件,为了方便开发,vue推出了一个状态管理工具vuex,可以很方便的实现组件之间的参数传递

    相关文章

      网友评论

          本文标题:vue组件通信(父子)

          本文链接:https://www.haomeiwen.com/subject/ytcxsftx.html