VueJs 运行时组件答案

【问题标题】：VueJs Runtime componentsVueJs 运行时组件
【发布时间】：2017-06-25 14:51:09
【问题描述】：

我在当前项目中使用 VueJS，当我尝试注册新组件并像 <component></component> 一样使用它时，我遇到了运行时错误。我找到了像这样渲染组件的解决方案：

import App from './components/Example.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

是的，它确实有效，它确实呈现了我的组件，但是有没有办法坚持使用注册组件的方法？

我已经阅读了要在 webpack 中添加的脚本，但我不太确定我的运行代码的脚本是什么以及在哪里执行此操作：（也关注更改）

watchify src/app.js -t vueify -t babelify -p browserify-hmr -p [ vueify/plugins/extract-css -o public/styles.bundle.css ] -o public/app.bundle.js

【问题讨论】：

不清楚你问的是什么。为了使用 .vue 文件，您需要 vue-loader，例如使用预定义的 vue-cli 设置：github.com/vuejs/vue-cli
@wostex 当我以“标准”方式使用 .vue 文件时，会出现运行时错误，当我像上面所说的那样使用它们时，它可以正常工作。
我要使用Vue.component('example', require('./components/Example.vue'));

【解决方案1】：

您可以通过两种方式在模板中按照自己的方式使用组件。首先，可以全局注册组件。

import SomeComponent from "./SomeComponent.vue"

Vue.component("some-component", SomeComponent)

然后您可以在模板中将其用作<some-component></some-component>。

其次，可以在本地注册组件。

import SomeComponent from "./SomeComponent.vue"

new Vue({
    components:{
        SomeComponent
    }
})

同样，您可以在模板中使用 <some-component></some-component>，但只能在根 Vue.js 中使用。如果您想在其他组件中使用它，则需要将其导入并添加到您要使用它的组件的本地组件中。

【讨论】：