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

【问题标题】：How to add two components in one single Vue file to export?如何在一个 Vue 文件中添加两个组件进行导出？
【发布时间】：2018-12-01 07:41:26
【问题描述】：

我正在尝试在单个文件中创建一个包含两个按钮的组件，以将其导出到 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>

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

【问题讨论】：

标签： javascript html vue.js ag-grid vuetify.js

【解决方案1】：

发现上面的代码工作正常，只需要从两个按钮组件中删除 block='true' 即可。此属性将按钮扩展为可用空间的 100%，以便其他按钮重叠。

【讨论】：