时间戳

首页 > 解决方案 > 如何传递 @click(data) 道具来填写在 Vue 中有另一个组件的表单

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

问题描述

               //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 的新手，所以任何人都可以帮我做那个功能

标签： javascriptjqueryvue.jsvue-directives

解决方案

一种方法是使用事件：

 //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()

推荐阅读