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中所有组件的全局导入与所选组件的导入混合使用吗？

1 个答案: