父组件根据id触发子组件内el-tree的node-click事件
时间: 2023-10-02 11:14:13 浏览: 119
vue父组件点击触发子组件事件的实例讲解
可以通过在父组件中使用$refs获取子组件的实例,然后通过实例的$emit方法触发子组件的自定义事件。
具体实现方法如下:
1.在子组件中定义自定义事件node-click:
```javascript
<el-tree
ref="tree"
...
@node-click="handleNodeClick"
>
</el-tree>
...
methods: {
handleNodeClick(node) {
this.$emit('node-click', node);
}
}
```
2.在父组件中获取子组件的实例,并监听子组件的自定义事件:
```javascript
<template>
<div>
<el-button @click="handleButtonClick">触发子组件的node-click事件</el-button>
<el-tree :data="treeData"></el-tree>
</div>
</template>
<script>
export default {
...
methods: {
handleButtonClick() {
const childComponent = this.$refs.childComponent;
childComponent.$on('node-click', this.handleNodeClick);
childComponent.$refs.tree.setCurrentKey('2');
},
handleNodeClick(node) {
console.log(node);
}
}
}
</script>
```
在handleButtonClick方法中,先通过this.$refs.childComponent获取子组件的实例,然后使用$on方法监听子组件的自定义事件node-click,并在handleNodeClick方法中处理事件。最后使用$refs.tree.setCurrentKey方法模拟点击节点,触发子组件的node-click事件。
阅读全文