Vue组件传值(props属性,父到子,子到父,兄弟传值)

文章目录

    • @[TOC](文章目录)
  • 前言
  • 一、props是什么?
      • 使用规则
  • 二、父传子 props
    • 实现步骤
    • 代码实现
    • 效果展示
  • 二.子传父 $emit
    • 实现步骤
    • 代码实现
    • 效果展示
  • 三.兄弟传值 EventBus
    • 实现步骤
    • 代码实现
    • 效果展示
  • 总结

前言

Vue是数据驱动视图更新的框架, 平时写业务时,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要


提示:以下是本篇文章正文内容,下面案例可供参考

一、props是什么?

  • propsVue实例上的一个属性,用于组件的传值
  • 作用:为了接收外面传过来的数据,与data、methods等是一个级别的配置项。
  • props在子属性和父属性之间形成一个单向向下的绑定(单向数据流)
  • 当父属性更新时,它会向下流向子属性,但不会反过来。这可以防止子组件意外改变父组件的状态

使用规则


二、父传子 props

实现步骤

  • 父传子通过 props实现
  • 父组件通过自定义变量传入子组件
  • 子组件利用props接收父组件值
  • 接收props不能修改,但是可以在组件中直接使用
  • 如果想要修改props,先把props赋值给其他变量,在进行修改

代码实现

//父组件





// 组件 B



效果展示

Vue组件传值(props属性,父到子,子到父,兄弟传值)_第3张图片

总结

  • 父传值子通过props实现
  • 子传父通过emit自定义事件 实现
  • 兄弟传值通过 eventBus实现

目前暂时总结三种常用的组件传值方法

你可能感兴趣的:(Vue,vue.js,前端,javascript)