利用.$emit、props、watch完成组件间（子组件、兄弟组件）传值

现在接触项目有一段时间了，因为vue中组件概念，组件间传值属于常用的一种手段。
如图所示：

image.png

现在假设有这样一个页面（父组件），点击列表（子组件 A）的编辑按钮时触发了父组件的事件，并且携带了一个参数，然后根据这个参数去获取这一行的数据，将其填入表单（子组件B）之中，至此，就完成了父子组件的传值和兄弟组件间的传值：
一、父子组件间传值（尤指需要通过触发事件来传值）
.$emit

// 父组件里先绑定下
    


    // 子组件触发父组件edit事件
    handleEdit (currentRow) {
      this.$emit('edit', currentRow.Id)
    },

    // 父组件接收子组件通过$emit方法传递的参数，并将其赋值给currentRow保存下来，为待会传给其他子组件作准备。
    handleEdit (Id) {
      this.editVisible = true
      this.currentRow = Id
    },

二、兄弟组件间传值
.$emit+props+watch
完成以上代码，发现作为父组件，其实就是充当了其他子组件之间传值的媒介，如果不用中央事件总线的方法去处理兄弟组件间的传值，那现在这种方法还是比较简单的。

// 记得先将获取到的这个参数初始化一下，然后双向绑定到子组件B上
  

  // 接收父组件传递的参数
  props: {
    editVisible: {
      type: Boolean,
      default: false
    },
    rowId: {
      type: String,
      default: null
    }
  }

  watch: {
    // 监听父组件传递的数据
    rowId (val) {
      this.getRowData(val) // 这里是通过传递的这个参数去获取了这一行的数据
    }
  },

有时候需要传递多个参数，可以直接将一个对象传递过来，然后根据需要进行侦听即可，如下，虽然传递了一个对象，但是获取表单数据的时候只用到一个属性，需要注意的是，如果你要侦听一个对象，记得用deep：true。

    'rowData.id': {
      handler (val) {
        // 为当前表单赋值
        this.getRowData(val)
      },
      immediate: true
    }