我们能否将引导-vue中所有组件的全局导入与所选组件的导入混合起来？

Question

我想要大大减少标签噪音和减少长标签名称的短名称在引导-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)全局注册所有组件，或者手动导入所需的组件，并按使用不同标记名称的方式注册它。

请参阅个别组件和指令