当前位置：首页 > VUE

vue 实现删除传值

2026-01-20 09:19:13VUE

Vue 实现删除传值的方法

在 Vue 中实现删除并传值通常涉及父子组件通信或事件触发。以下是几种常见实现方式：

通过 props 和 $emit 实现父子组件传值

父组件传递数据和方法给子组件，子组件触发删除操作后回传数据：

vue 实现删除传值

<!-- 父组件 -->
<template>
  <child-component :items="items" @delete-item="handleDelete" />
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]
    }
  },
  methods: {
    handleDelete(itemId) {
      this.items = this.items.filter(item => item.id !== itemId)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
    <button @click="$emit('delete-item', item.id)">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['items']
}
</script>

使用 v-model 实现双向绑定

通过 v-model 实现更简洁的双向数据绑定：

vue 实现删除传值

<!-- 父组件 -->
<template>
  <child-component v-model="items" />
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div v-for="(item, index) in value" :key="item.id">
    {{ item.name }}
    <button @click="removeItem(index)">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    removeItem(index) {
      this.$emit('input', [
        ...this.value.slice(0, index),
        ...this.value.slice(index + 1)
      ])
    }
  }
}
</script>

使用 Vuex 状态管理

对于大型应用，可以使用 Vuex 集中管理状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]
  },
  mutations: {
    DELETE_ITEM(state, itemId) {
      state.items = state.items.filter(item => item.id !== itemId)
    }
  },
  actions: {
    deleteItem({ commit }, itemId) {
      commit('DELETE_ITEM', itemId)
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div v-for="item in $store.state.items" :key="item.id">
    {{ item.name }}
    <button @click="deleteItem(item.id)">Delete</button>
  </div>
</template>

<script>
export default {
  methods: {
    deleteItem(itemId) {
      this.$store.dispatch('deleteItem', itemId)
    }
  }
}
</script>

使用事件总线实现跨组件通信

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

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- 发送事件的组件 -->
<template>
  <button @click="deleteItem(item.id)">Delete</button>
</template>

<script>
import { EventBus } from './eventBus'
export default {
  methods: {
    deleteItem(itemId) {
      EventBus.$emit('item-deleted', itemId)
    }
  }
}
</script>

<!-- 接收事件的组件 -->
<script>
import { EventBus } from './eventBus'
export default {
  created() {
    EventBus.$on('item-deleted', itemId => {
      // 处理删除逻辑
    })
  }
}
</script>