将发出点击传递给插槽元素中的父级以在父级 vue 3 插槽选项 api 中运行函数

Question

问候国王，

我正在尝试从包含此组件中的按钮和插槽的子 (todoitem.vue) 元素向将在父级中运行方法的父级(app.vue) 发出点击。例如，现在当我单击编辑按钮时，父级可编辑（）中的方法将运行，当我单击删除按钮时，则在父级中运行可删除（）方法。如何解决这个问题。我曾尝试使用 v-slot 传递，但它只发送变量也尝试发出但未能发出。我是 vue 的新手..谢谢

父级（app.vue）

<template>
<div>
  <todolist>
      <todoitem v-for="each in a" :key="each.list">
          {{each.list}}
      </todoitem>

  </todolist>
    <todolist>
      <todoitem v-for="each in b" :key="each.list">
          {{each.list}}
      </todoitem>

  </todolist>
</div>
</template>

<script>
import todolist from "./components/todolist.vue";
import todoitem from "./components/todoitem.vue";
export default {
  name: "App",
  data(){
    return{
      a:[
        {list:"AAAA"},
          {list:"BBBB"},
            {list:"CCC"},
      ],
            b:[
        {list:"DDDD"},
          {list:"EEEE"},
            {list:"FFFF"},
      ],

    }
  },
  components: {
 
    todolist,
    todoitem
  },
  methods:{
    editable(){
      console.log('editabel')
      
    },
    deletable(){
      console.log('deletable')
      
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

孩子（待办事项）

<template>
<slot></slot>

    <button @click="test">Edit</button>
   <button @click="test2">delete</button>

</template>

<script>
export default {
  name: "todoitem",
method:{
  test(){
    console.log('edit click')
    this.$emit('edit-item')
  },
    test2(){
    console.log('delete click')
    this.$emit('del-item')
  }
}


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

tod​​olist

<template>
<slot></slot>
  <div>
   
  </div>
</template>

<script>
export default {
  name: "todolist",

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Answer 1

基本上它的结构是这样的 - 只需将 emit 与 function-name 和参数放在您的 methods 之一中，如下所示：

Child.vue

this.$emit("Your_Function_Name", Parameter_1, Parameter_2);

比去你的parent.vue调用你的发射函数并在methods的parent.vue中使用它：

Parent.vue

<template>
  ...
  <Child @Your_Function_Name="Your_Function_Name">
  ...
</template>

<script>
  methods: {
    Your_Function_Name(Parameter_1, Parameter_2) {
      console.log(Parameter_1, Parameter_2)
    }
  }
</script>

希望对您有所帮助！