如何传递 @click(data) 道具来填写在 Vue 中有另一个组件的表单答案

【问题标题】：How to pass @click(data ) props to fill form which have another component in Vue如何传递 @click(data) 道具来填写在 Vue 中有另一个组件的表单
【发布时间】：2020-08-24 06:05:05
【问题描述】：

               //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 的新手，所以任何人都可以帮助我完成该功能

【问题讨论】：

标签： javascript jquery vue.js vue-directives

【解决方案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()

【讨论】：