我们可以将 bootstrap-vue 中所有组件的全局导入与选定组件的导入混合使用吗？

Question

我想在 bootstrap-vue 中显着减少标签噪音并将长标签名称减少为短名称。这就是我在 main.js:

中在 vue-cli 生成的项目中所做的

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import bformGroup from 'bootstrap-vue/es/components/form-group/form-group'
import bformInput from 'bootstrap-vue/es/components/form-input/form-input'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.config.productionTip = false
Vue.component('bfg', bformGroup) // b-form-group
Vue.component('bfin', bformInput) // b-form-input

在 MyComponent.Vue 现在我有：

<bfg id="exampleInputGroup2" label="Your Name:" label-for="exampleInput2">
      <bfin id="exampleInput2" type="text" v-model="form.name" required placeholder="Enter name">
      </bfin>
</bfg>

而不是：

<b-form-group id="exampleInputGroup2" label="Your Name:" label-for="exampleInput2">
      <b-form-input id="exampleInput2" type="text" v-model="form.name" required placeholder="Enter name">
      </b-form-input>
</b-form-group>

这在技术上是否正确？在非常大的表单中，它会产生巨大的差异，使表单看起来更清晰，并专注于表单的关键内容。

Answer 1

Vue.use(BootstrapVue) 使用默认的长标签名称全局注册所有组件和指令。

当你

Vue.component('bfg', bformGroup) // b-form-group 
Vue.component('bfin', bformInput) // b-form-input

您正在重新注册组件，但标签名称不同。所以同一个组件有两个副本。

要么使用 Vue.use(BootstrapVue) 全局注册所有组件，要么手动导入您想要的组件，如果您不想要两个副本，则使用不同的标签名称进行注册

见Individual components and directives

我们可以将 bootstrap-vue 中所有组件的全局导入与选定组件的导入混合使用吗？

can we mix global import of all components in bootstrap-vue with import of selected component?

vue.js

bootstrap-vue