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

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&nbsp; type="button"&nbsp; class="btn btn-warning"&nbsp; v-on:click="$parent.deleteClicked(name)"&nbsp; style="margin: 3px;">&nbsp; {{ name }}</button >另外，我建议使用自定义事件来实现您想要做的事情。<!-- Children component --><button&nbsp; type="button"&nbsp; class="btn btn-warning"&nbsp; v-on:click="$emit('delete', name)"&nbsp; style="margin: 3px;">&nbsp; {{ name }}</button ><!-- Parent component --><sablonx&nbsp; v-for="name in names"&nbsp; :key="name"&nbsp; :name="name"&nbsp; @delete="deleteClicked"/>您可以看到没有参数被直观地传递给函数deleteClicked，但实际发生的是它侦听delete事件，并将从事件传递的数据应用到函数。另一种写法是：<!-- Parent component --><sablonx&nbsp; v-for="name in names"&nbsp; :key="name"&nbsp; :name="name"&nbsp; @delete="deleteClicked($event)"/>$event包含要删除的名称的变量在哪里。

Answer 2

如果要将数据从子组件传输到父组件，则需要使用 $emit （与将数据从父组件传递到子组件时不同 - 然后您想要使用道具，或者如果您将数据从一个组件传递到另一个组件，您可以使用事件总线，这并不总是推荐，但这是另一个主题）无论如何，代码是：this.$emit('youremitname',&nbsp;payload);每当您想发出数据时，您都希望拥有此代码，例如，如果您想在单击按钮后发出数据，您希望将其包含在函数中。（如果您在 @click 属性中使用它，则不需要“this”关键字，只需编写：$emit('youremitname',&nbsp;payload)这会将数据传输到父级，但是请确保在使用组件的地方监听它，例如，如果父组件内的组件名称是“客户”，那么您的代码应如下所示：<Customers&nbsp;@youremitname></Customers>您还可以使用以下命令在“已安装”或“已创建”生命周期挂钩中侦听发射：$emit.$on('youremitname',&nbsp;passAFunctionHere).有关更多信息，请查看 Vue 文档 -自定义事件。