当前位置：首页 > 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)
    }
  }
})

组件中使用：

vue 实现删除传值

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

事件总线跨组件删除

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

创建事件总线：

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

发送事件组件：

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)
  }
}

后代组件：

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

标签: vue

分享给朋友：

vue实现矩阵

Vue 实现矩阵的方法在 Vue 中实现矩阵操作可以通过多种方式完成，以下是一些常见的方法：使用二维数组表示矩阵矩阵可以用二维数组来表示，每个元素对应矩阵中的一个值。在 Vue 的 data…

vue实现$.extend

Vue 实现类似 jQuery 的 $.extend 功能在 Vue 中实现类似 jQuery 的 $.extend 功能，可以通过多种方式完成。$.extend 主要用于合并多个对象的属性，Vue…

vue实现switch

Vue 实现 Switch 开关组件在 Vue 中实现 Switch 开关组件可以通过自定义组件或使用现有 UI 库完成。以下是几种常见实现方式：自定义 Switch 组件创建一个基础 Sw…

vue实现画图

Vue 实现画图功能在 Vue 中实现画图功能通常需要结合 HTML5 的 <canvas> 元素或第三方库。以下是几种常见的方法：使用原生 Canvas API 通过 Vue 直接…

vue轮询实现

Vue 轮询实现方法在 Vue 中实现轮询可以通过以下几种方式：使用 setInterval data() { return { pollInterval: null } },…

vue实现曲线

Vue 实现曲线的方法在 Vue 中实现曲线可以通过多种方式，包括使用 SVG、Canvas 或第三方库如 D3.js、ECharts 等。以下是几种常见的方法：使用 SVG 绘制曲线 SVG…

vue 实现删除传值