0

我想在 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>

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

4

1 回答 1

1

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

当你这样做

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

您正在再次注册组件，但使用不同的标签名称。所以同一个组件有两个副本。

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

请参阅单个组件和指令

于 2018-03-23T09:49:54.090 回答