为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只甜甜圈 2022-06-16 14:38:58
我想从组件向父方法发送参数。但是我收到了这些错误消息“[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>
查看完整描述

2 回答

?
浮云间

TA贡献1829条经验 获得超4个赞

您不需要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包含要删除的名称的变量在哪里。


查看完整回答
反对 回复 2022-06-16
?
慕无忌1623718

TA贡献1744条经验 获得超4个赞

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

无论如何,代码是:

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

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

$emit('youremitname', payload)

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

<Customers @youremitname></Customers>

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

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

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


查看完整回答
反对 回复 2022-06-16
  • 2 回答
  • 0 关注
  • 113 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号