Как передать реквизиты @click (data) для заполнения формы, у которой есть другой компонент в Vue

Question

               //this  parent component
     <a href="#" @click="albumEdit(album)"></a>


         <publishalbum-component :click-btn="albumEdit(album)"> </publishalbum-component>//child component send click funct6ion vai props


            //in child component execute this method
             albumEdit(album) {
                        this.editMode = true;
                        this.form.reset();
                        this.form.clear();
                        this.form.fill(album);
                      }

,

но не работает ... как это сделать Я новичок в vuejs, так что кто-нибудь может помочь мне сделать эту функцию

Answer 1

Один из подходов - использовать события:

 //this  parent component
     <a href="#" @click="albumEdit(album)"></a>
 ...
<publishalbum-component @clickedButton="albumEdit(album)"> </publishalbum-component>
...
methods: {
  albumEdit(album) {
    this.editMode = true;
    this.form.reset();
    this.form.clear();
    this.form.fill(album);
  }
}
//in child component emit an event and a parent component shuld receive it and call the albumEdit function
  this.$emit('clickedButton')

Другой подход:

 //this  parent component
     <a href="#" @click="albumEdit(album)"></a>
...
 ...
<publishalbum-component :clickedButton="albumEditCallback"> </publishalbum-component>
methods: {
  albumEditCallback() {
    this.albumEdit(this.album) // depends on where you store an album object
  },
  albumEdit(album) {
    this.editMode = true;
    this.form.reset();
    this.form.clear();
    this.form.fill(album);
  }
}

//in child component execute this method
  this.clickedButton()