Question

我正在使用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

Answer 1

有两种方法可以按照自己的方式在模板中使用该组件。首先，您可以在全球范围内注册该组件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="closebtn animate">Test</button><br /><br />

<button class="closebtn closebtn2">Test</button>

然后，您可以在模板中将其用作import SomeComponent from "./SomeComponent.vue" Vue.component("some-component", SomeComponent)。

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

<some-component></some-component>

同样，您可以在模板中使用import SomeComponent from "./SomeComponent.vue" new Vue({ components:{ SomeComponent } })，但只能在根Vue中使用。如果要在其他组件中使用它，则需要将其导入并将其添加到要使用它的组件的本地组件中。

VueJs运行时组件

1 个答案: