亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何從組件向父方法發送數據?

如何從組件向父方法發送數據?

一只甜甜圈 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 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號