vue.js - vuejs Prop 是只读的

Question

我是 Vue 新手，正在学习 Vuejs 3。我有一个任务列表。我想在每行的末尾显示该列表和一个跨度，以便通过单击该跨度删除该行。

我有 createApp 的代码:

const babies = Vue.createApp({
    data(){
        return{
            tasks:[
                {id: 0,kid:'Sabina',tache:'eductate'}
                {id: 1,kid:'Henry',tache:'listen'}
           ]
        }
    },
    components:{
        'listbabies':Compodeux
    },
    methods:{
        supprimer(ido){
            this.tasks = Object.values(this.tasks).filter(item => item.id !== ido)
        }    
    }
})

组件包含这个:

const Compodeux=('listbabies',{
    props:{
        tasks:{
            type: Object
        },
        suppr:{
            type: Function
        }
    },
    data(){
        return{
            line:"line_" + this.tasks.id
        }
    },
    template:
        `<div :id=this.ligne>
            <div id="ligne_credits">
                <span> {{tasks.kid}} </span>
                <span> {{tasks.tache}} </span>
                <span  @click="$emit(this.supprimer(taches.id))" :id="taches.id"> [*] </span>
            </div>
        </div>
        `
})

所有这些代码都可以正常工作，但对于组件模板中的 @click 而言。我收到一条错误消息:this.supprimer 不是函数

Answer 1

通过在 emit 函数中定义名称来使用自定义事件。

@click="$emit('supprimer', taches.id)

然后您需要在父组件模板中捕获事件。

<template>
  <MyChildComponent @supprimer="supprimer" />
</template>

更多详情，查看the docs .