Question

我想通过单击按钮将不同的数据传递给vue组件。我不确定最佳做法是什么。

这就是我的想象，但是我真的不知道如何实现它。

import TableComp from "./TableComp";

export default {
  components: {
    TableComp
  },

  data() {
    return {
      data1: {
        Name: "John"
      },
      data2: {
        Name: "Allice"
      },
      data3: {
        Name: "Erick"
      },
      selectedData: {}
    };
  },
  methods: {
    select: function(name) {
      this.selectedData = this.name;
    }
  }
};

<template>
  <div>
    <button name="data1" @click="select(name)">data1</button>
    <button name="data2" @click="select(name)">data2</button>
    <button name="data3" @click="select(name)">data3</button>
    <button></button>
    <table-comp v-bind:data="selectedData"></table-comp>
  </div>
</template>

我知道这行不通，但是是否可以将按钮名称传递给这种方法，或者有更好的方法吗？

Answer 1

从else中删除Guard，因为您正在将值作为参数传递给方法。

AppModule

我还建议您将3个不同的名称转换为和数组，并使用@NgModule({ imports: [ RouterModule.forRoot([ { path: 'dashboard', component: DashboardComponent, canActivate:[AuthGuard], } ]) ], providers: [AuthGuard] }) class AppModule {}助手来呈现按钮。

示例：

this

按钮：

this.name

Answer 2

虽然您可以这样做，但是根据项目的需要，您还有其他可行的选择。它们都是实现所需目标的有效方法。您可以使用vuex来管理状态，也可以使用事件。要使用事件，

<button name="data1" @click="select(name)">data1</button>

methods:{
    select(name){
          this.$emit('click-event', name)
    }
}

在子组件中，您可以收听此事件；

<listening-component @click-event='doSomething'></listening-component>

然后编写doSomething方法以实现所需的内容。

如何在将不同的道具传递到Vue组件之间切换？

2 个答案: