如何在一个 Vue 文件中添加两个组件进行导出？

Question

我正在尝试在单个文件中制作两个按钮的组件，以将其导出到 ag-grid-vue 的单个列中。我每列只能显示一个按钮。这是我的代码：

  <template>
  <div>
      <v-btn fab small style="height: 24px; width:24px; margin-top: -1.5px;"
          color='primary'
          block='true'
          @click.stop="dialogEdit = !dialogEdit">
          <v-icon>fa-pencil</v-icon>
      </v-btn>
      <v-btn fab small style="height: 24px; width:24px; margin-top: -1.5px;"
        color='primary'
        block='true'
        @click.stop="dialogDelete = !dialogDelete">
        <v-icon>fa-trash</v-icon>
      </v-btn>
  </div>
  </template>
  <script>
  import Vue from 'vue';
  export default Vue.extend({
    methods: {
      invokeParentMethod () {
        this.params.context.componentParent.methodFromParent(
          `Row: ${this.params.node.rowIndex}, Col: ${
            this.params.colDef.headerName
          }`
       );
     }
    } 
  });
  </script>

我正在我的网页设计中导入此文件以添加组件，然后在网格的列中使用它来编辑和更新网格中的记录。它既不显示错误也不显示按钮我也更改了样式和边距但没有删除按钮的迹象。

Answer 1

发现上面的代码工作正常，只需要从两个按钮组件中删除 block='true'。属性将按钮扩展到可用区域的 100% space，因此其他按钮会重叠。

如何在一个 Vue 文件中添加两个组件进行导出？

How to add two components in one single Vue file to export?

html

javascript

vue.js

ag-grid

vuetify.js