Vue子传父细节

我们一般在vue的子组件给子组件传值的时候，多用的是自定义事件。通过在子组件中声明相应的方法，例如：

 ok() {
      this.$emit('ok');
    },

然后在父组件中，调用这个组件的时候，在组件上用自己的方法去接收这个方法名。

    <!-- 查看弹窗 -->
    <normal-dialog
      v-if="showDialogCheck"
      :person="person"
      type="查看"
      @ok="CheckOk"
      @cancel="CheckCancel"
    />

在CheckOk方法中就可以执行想要的方法。

    CheckOk() {
      this.getMessage();
    },

在某些情况，我们可能需要获取子组件的数据，例如一些表单信息和其他信息。

我们可以在自组件的自定义事件中通过回调函数的方式传递给父组件数据，就像这样：

    ok() {
      this.$emit('ok', this.per, this.defaultChecked);
    },

在父组件中我，执行的是EditOk方法，获取到了val回调函数

    // 编辑数据方法
    EditOk(val) {
      // console.log((val[1].length)==0);
      if ((val[1].length) !== 0) {
        updateRoleList(val[0], (val[1])).then(res => {
        // console.log(res);
          this.getTaskList();
        }).catch(() => {
        });
      } else {
        updateRoleList(val[0], []).then(res => {
        // console.log(res);
          this.getTaskList();
        }).catch(() => {
        // console.log(err)
        });
      }
      this.showDialogEdit = false;
    },

传递值是是两个逗号拼接的参数，而在获取值的时候是整合成一个数组的形式，通过val[0]，val[1]来获取相应的数据，再进行其他操作即可。