vue按钮事件监听传值

最新推荐文章于 2025-03-23 20:54:57 发布

hmbbpdx

最新推荐文章于 2025-03-23 20:54:57 发布

阅读量64

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/hmbbpdx/article/details/134017308

版权

文章描述了一个名为facilitygrouping的Vue组件，包含leftTree和rightData两个部分。leftTree组件实现了一个搜索过滤功能的树形视图，rightData组件用于接收并显示节点点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

facilitygrouping组件

<template>
  <div class="parent-container">

    <el-row :gutter="24" class="rowBox">

      <el-col :span="5" class="colBox">
        <div class="leftBox">
          <leftTree></leftTree>
        </div>
      </el-col>

      <el-col :span="19" class="colBox">
        <div class="rightBox">
          <rightData></rightData>
        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import leftTree from '../../views/group/leftTree'
import rightData from '../../views/group/rightData'

export default {
  name: 'facilitygrouping',
  components: {
    leftTree,
    rightData
  },
  data:()=>({

  }),
  methods: {

  }
}
</script>

<style scoped lang="less">

.parent-container {
  height: 100%;

  .rowBox {
    height: 100%;

    .colBox {
      height: 100%;

      .leftBox {
        width: 100%;
        height: 100%;
        border: 0.1vh solid red;
        padding: 3%;
      }

      .rightBox {
        width: 100%;
        height: 100vh;
        border: 0.1vh solid blue;
      }

    }

  }

}


</style>

leftTree组件

<template>
  <div class="OutBox">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
    >
    </el-input>
    <el-tree
      class="filter-tree"
      :data="treeData"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
      :highlight-current="true"
      icon-class="el-icon-caret-right"
      @node-click="handleNodeClick"
    >
    </el-tree>
  </div>
</template>

<script>
import { getBigScreenList } from '@/api/bigScreen/bigscreen'
import { convertToTree } from '@/api/tree/factree'
import EventBus from '@/evenBus/evenBus'

export default {
  name: 'leftTree',
  created() {

  },
  mounted() {
    this.getBigScreenList()
    this.$refs.tree.filter(this.filterText)
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  data: () => ({
    filterText: '',
    defaultProps: {
      children: 'children',
      label: 'label'
    },
    treeData: [],
    userList: []
  }),
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    /** 获取数据  */
    getBigScreenList() {
      let userId = this.$store.state.user.userId
      getBigScreenList(userId).then(res => {
        /** 节点数据 */
        this.userList = res.data.userList
        this.treeData = convertToTree(this.userList)
      })
    },
    handleNodeClick(data) {
      EventBus.$emit('node-click', data);
      console.log('Node clicked:', data);
    }
  }
}
</script>

<style scoped lang="less">

.OutBox{
  width: 100%;
  height: 100%;
}

</style>

rightData组件

<template>
  <div>
    <p>{{ clickedNode }}</p>
  </div>
</template>

<script>
import EventBus from '@/evenBus/evenBus'

export default {
  name: 'rightData',
  data: () => ({
    clickedNode: { data: 'default'}
  }),
  // 子组件B
  created() {
    EventBus.$on('node-click', this.handleNodeClick)
  },
  destroyed() {
    EventBus.$off('node-click', this.handleNodeClick)
  },
  methods: {
    handleNodeClick(data) {
      this.clickedNode = data
      console.log('Item clicked in component B. Key:', data)
    }
  }
}
</script>

<style scoped>

</style>

evenBus.js


// 事件总线

import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;