当前位置：首页 > VUE

vue 实现删除传值

2026-02-21 01:21:29VUE

Vue 实现删除传值的方法

父子组件传值删除

在父组件中定义数据和方法，通过props传递给子组件，子组件触发删除操作后通过$emit通知父组件更新数据。

父组件代码示例：

<template>
  <child-component :list="list" @delete-item="handleDelete"></child-component>
</template>

<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    handleDelete(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

子组件代码示例：

<template>
  <div v-for="(item, index) in list" :key="index">
    {{ item }}
    <button @click="deleteItem(index)">删除</button>
  </div>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    deleteItem(index) {
      this.$emit('delete-item', index)
    }
  }
}
</script>

Vuex状态管理删除

对于大型应用，可以使用Vuex集中管理状态，通过mutations来修改数据。

store.js示例：

const store = new Vuex.Store({
  state: {
    items: ['item1', 'item2', 'item3']
  },
  mutations: {
    DELETE_ITEM(state, index) {
      state.items.splice(index, 1)
    }
  }
})

组件中使用：

methods: {
  deleteItem(index) {
    this.$store.commit('DELETE_ITEM', index)
  }
}

事件总线跨组件删除

对于非父子关系的组件，可以使用事件总线实现通信。

创建事件总线：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送事件组件：

import { EventBus } from './event-bus.js'

methods: {
  deleteItem(index) {
    EventBus.$emit('delete-item', index)
  }
}

接收事件组件：

import { EventBus } from './event-bus.js'

created() {
  EventBus.$on('delete-item', index => {
    this.list.splice(index, 1)
  })
}

使用provide/inject

对于深层嵌套组件，可以使用provide/inject传递删除方法。

祖先组件：

provide() {
  return {
    deleteItem: this.handleDelete
  }
},
methods: {
  handleDelete(index) {
    this.list.splice(index, 1)
  }
}

后代组件：

vue 实现删除传值

inject: ['deleteItem'],
methods: {
  delete(index) {
    this.deleteItem(index)
  }
}

标签: vue

分享给朋友：

vue实现bootstrap

Vue 中集成 Bootstrap 的方法在 Vue 项目中集成 Bootstrap 可以通过以下方式实现，涵盖样式、组件和交互功能。安装 Bootstrap 依赖通过 npm 或 yarn…

vue实现节流

vue实现节流的方法在Vue中实现节流（throttle）功能，通常用于限制高频事件的触发频率，例如滚动、输入或按钮点击。以下是几种常见的实现方式：使用Lodash的throttle函数安装L…

vue滚动实现

Vue 滚动实现方法使用原生滚动在 Vue 中可以通过 ref 获取 DOM 元素，调用原生滚动方法实现滚动效果。适用于简单场景。 <template> <div ref=…

实现vue table

Vue 表格实现方法基础表格实现使用 Vue 的 v-for 指令可以快速渲染表格数据。在模板中定义表格结构，通过数据绑定动态生成行和列。 <template> <tabl…

vue实现波形

实现波形效果的方法在Vue中实现波形效果可以通过多种方式完成，常见的方法包括使用Canvas绘制、CSS动画或第三方库。以下是几种实现方案：使用Canvas绘制波形通过Canvas API动态…

vue 实现工具

Vue 实现工具的方法使用 Vue 实现工具功能可以通过多种方式完成，具体取决于工具的类型和需求。以下是几种常见的方法：组件化实现创建一个独立的 Vue 组件来封装工具功能。例如，实现一个计…

vue 实现删除传值