Vue中的el-tree @node-click传自定义参数怎么用

在Vue.js开发中，Element UI是一个非常流行的UI组件库，其中的el-tree组件常用于展示树形结构的数据。el-tree组件提供了一个@node-click事件，当用户点击树节点时会触发该事件。默认情况下，@node-click事件会传递三个参数：data（当前节点的数据）、node（当前节点的Node对象）和vm（当前节点的组件实例）。然而，在某些场景下，我们可能需要传递自定义参数给事件处理函数。本文将详细介绍如何在el-tree的@node-click事件中传递自定义参数。

1. @node-click事件的基本用法

首先，我们来看一下@node-click事件的基本用法。假设我们有一个树形结构的数据，如下所示：

data() {
  return {
    treeData: [
      {
        label: '一级 1',
        children: [
          {
            label: '二级 1-1',
            children: [
              {
                label: '三级 1-1-1'
              }
            ]
          }
        ]
      },
      {
        label: '一级 2',
        children: [
          {
            label: '二级 2-1'
          },
          {
            label: '二级 2-2'
          }
        ]
      }
    ]
  };
}

在模板中，我们可以使用el-tree组件来展示这个树形结构，并监听@node-click事件：

<el-tree
  :data="treeData"
  @node-click="handleNodeClick"
></el-tree>

在handleNodeClick方法中，我们可以获取到默认传递的三个参数：

methods: {
  handleNodeClick(data, node, vm) {
    console.log('当前节点数据:', data);
    console.log('当前节点对象:', node);
    console.log('当前节点组件实例:', vm);
  }
}

2. 传递自定义参数的需求

在某些情况下，我们可能需要在@node-click事件中传递自定义参数。例如，我们可能希望在点击节点时，除了获取节点的数据外，还需要传递一些额外的信息，比如当前用户的ID、页面状态等。

假设我们有一个需求：在点击树节点时，除了获取节点的数据外，还需要传递一个自定义参数userId，表示当前用户的ID。那么，如何在@node-click事件中传递这个自定义参数呢？

3. 使用闭包传递自定义参数

在Vue中，我们可以通过闭包的方式在事件处理函数中传递自定义参数。具体来说，我们可以在模板中使用一个匿名函数来包裹事件处理函数，并在匿名函数中传递自定义参数。

例如，我们可以在模板中这样写：

<el-tree
  :data="treeData"
  @node-click="(data, node, vm) => handleNodeClick(data, node, vm, userId)"
></el-tree>

在这个例子中，我们使用了一个箭头函数来包裹handleNodeClick方法，并在箭头函数中传递了自定义参数userId。

在handleNodeClick方法中，我们可以接收这个自定义参数：

methods: {
  handleNodeClick(data, node, vm, userId) {
    console.log('当前节点数据:', data);
    console.log('当前节点对象:', node);
    console.log('当前节点组件实例:', vm);
    console.log('当前用户ID:', userId);
  }
}

4. 使用$emit传递自定义参数

另一种传递自定义参数的方式是通过$emit方法。我们可以在@node-click事件中手动触发一个自定义事件，并在自定义事件中传递自定义参数。

首先，在模板中，我们可以这样写：

<el-tree
  :data="treeData"
  @node-click="handleNodeClick"
></el-tree>

然后，在handleNodeClick方法中，我们可以手动触发一个自定义事件，并传递自定义参数：

methods: {
  handleNodeClick(data, node, vm) {
    this.$emit('custom-node-click', data, node, vm, this.userId);
  }
}

在父组件中，我们可以监听这个自定义事件，并处理传递过来的参数：

<el-tree
  :data="treeData"
  @node-click="handleNodeClick"
  @custom-node-click="handleCustomNodeClick"
></el-tree>

在handleCustomNodeClick方法中，我们可以接收自定义参数：

methods: {
  handleCustomNodeClick(data, node, vm, userId) {
    console.log('当前节点数据:', data);
    console.log('当前节点对象:', node);
    console.log('当前节点组件实例:', vm);
    console.log('当前用户ID:', userId);
  }
}

5. 使用$attrs传递自定义参数

还有一种方式是使用$attrs来传递自定义参数。$attrs是Vue提供的一个属性，用于传递父组件中未在props中声明的属性。

首先，在父组件中，我们可以这样写：

<el-tree
  :data="treeData"
  @node-click="handleNodeClick"
  :custom-param="userId"
></el-tree>

然后，在el-tree组件中，我们可以通过$attrs获取到这个自定义参数：

methods: {
  handleNodeClick(data, node, vm) {
    const customParam = this.$attrs.customParam;
    console.log('当前节点数据:', data);
    console.log('当前节点对象:', node);
    console.log('当前节点组件实例:', vm);
    console.log('自定义参数:', customParam);
  }
}

6. 总结

在Vue中使用el-tree组件的@node-click事件时，传递自定义参数有多种方式。我们可以通过闭包、$emit、$attrs等方式来实现。具体选择哪种方式，取决于具体的业务需求和代码结构。

• 闭包：适用于在模板中直接传递自定义参数的场景，代码简洁，但可能会增加模板的复杂度。
• $emit：适用于需要在父组件中处理自定义参数的场景，代码结构清晰，但需要手动触发自定义事件。
• $attrs：适用于需要在子组件中获取父组件传递的自定义参数的场景，代码简洁，但需要确保父组件传递了正确的属性。

在实际开发中，我们可以根据具体需求选择合适的方式来传递自定义参数，以实现更灵活的事件处理逻辑。