Как отправить данные в родительский метод из компонентов?

Question

Я хочу отправить параметры родительскому методу из компонента. Но я получил это сообщение об ошибке "[Vue warn]: Ошибка в обработчике v-on:" TypeError: Невозможно прочитать свойство '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>

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)

Это передаст данные родителю, однако убедитесь, что вы слушаете там, где вы используете свой компонент, например, если имя вашего компонента внутри родительского компонента enet равно «Customers», то ваш код должен выглядеть следующим образом:

<Customers @youremitname></Customers>

Вы также можете прослушивать emit в «подключенный» или «созданный» хук жизненного цикла, используя:

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

Для получения дополнительной информации ознакомьтесь с Vue docs - Пользовательские события .