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

【问题标题】：How to send data to parent method from components?如何从组件向父方法发送数据？
【发布时间】：2020-07-17 15:46:33
【问题描述】：

我想从组件向父方法发送参数。但是我收到了这些错误消息“[Vue warn]: Error in v-on handler:”TypeError: Cannot read property 'deleteClicked' of undefined”

我想从组件向 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>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

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

不管怎样，代码是：

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

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

$emit('youremitname', payload)

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

<Customers @youremitname></Customers>

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

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

有关更多信息，请查看 Vue 文档 - Custom Events。

【讨论】：

我像这样修改了我的代码，但仍然无法使用模板：' '
无需使用“this”关键字。只需写：“$emit('deleteClicked', name)”（确保在名称中使用括号）。
我不能使用 "$ emit ('deleteClicked', name)" 因为我使用单引号中的模板。引用太多了。模板：' '
你可以用`转义它
@nook 我试过了，但它无法逃脱。你能用这个字符模板修改我的代码吗：' '

【解决方案2】：

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

<button
  type="button"
  class="btn btn-warning"
  v-on:click="$parent.deleteClicked(name)"
  style="margin: 3px;">
  {{ name }}
</button >

另外，我建议使用custom events 来实现你想做的事情。

<!-- 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 是包含您要删除的名称的变量。

【讨论】：