如何从组件向父方法发送数据？

Question

我想从组件向父方法发送参数。但是我收到了这些错误消息“[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'deleteClicked'”我想将参数从组件发送到 deleteClicked 函数。我的javascript代码如下。var sablon = Vue.extend({    props: ["name"],    template: '<button type="button" class="btn btn-warning" v-on:click=this.$parent.deleteClicked(name) style = "margin: 3px;" > {{ name }}</button > '});var viewmodel = new Vue({    el: '#divimiz',    components: { 'sablonx': sablon },    data: {        names: ['Mary', 'John', 'Robert'],        newname: '',        test: "selam",    },    methods: {        addname: function () {            this.names.push(this.newname);            this.newname = '';        },        deleteClicked: function (item) {            var x = this.names.indexOf(item);            if (x > -1) {                this.names.splice(x, 1);            }        },    },});我的html代码如下，<script src="https://unpkg.com/vue/dist/vue.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><div id="divimiz" class="container">    <div class="row">    <sablonx v-for="name in names" v-bind:name="name"></sablonx>    <br>    <input class="form-control" type="text" v-model="newname" style="width: 400px; margin: 5px;">    <button class="btn btn-info" v-on:click="addname">Click to add name</button></div><script src="x.js"></script>

Answer 1

您不需要this在模板中使用关键字。

<button

  type="button"

  class="btn btn-warning"

  v-on:click="$parent.deleteClicked(name)"

  style="margin: 3px;">

  {{ name }}

</button >

另外，我建议使用自定义事件来实现您想要做的事情。

<!-- Children component -->

<button

  type="button"

  class="btn btn-warning"

  v-on:click="$emit('delete', name)"

  style="margin: 3px;">

  {{ name }}

</button >

<!-- Parent component -->

<sablonx

  v-for="name in names"

  :key="name"

  :name="name"

  @delete="deleteClicked"/>

您可以看到没有参数被直观地传递给函数deleteClicked，但实际发生的是它侦听delete事件，并将从事件传递的数据应用到函数。另一种写法是：

<!-- Parent component -->

<sablonx

  v-for="name in names"

  :key="name"

  :name="name"

  @delete="deleteClicked($event)"/>

$event包含要删除的名称的变量在哪里。

Answer 2

如果要将数据从子组件传输到父组件，则需要使用 $emit （与将数据从父组件传递到子组件时不同 - 然后您想要使用道具，或者如果您将数据从一个组件传递到另一个组件，您可以使用事件总线，这并不总是推荐，但这是另一个主题）

无论如何，代码是：

this.$emit('youremitname', payload);

每当您想发出数据时，您都希望拥有此代码，例如，如果您想在单击按钮后发出数据，您希望将其包含在函数中。（如果您在 @click 属性中使用它，则不需要“this”关键字，只需编写：

$emit('youremitname', payload)

这会将数据传输到父级，但是请确保在使用组件的地方监听它，例如，如果父组件内的组件名称是“客户”，那么您的代码应如下所示：

<Customers @youremitname></Customers>

您还可以使用以下命令在“已安装”或“已创建”生命周期挂钩中侦听发射：

$emit.$on('youremitname', passAFunctionHere).

有关更多信息，请查看 Vue 文档 -自定义事件。