Question

我正在尝试尝试实现一些我认为应该能够实现的目标，但是，目前我还无法实现目标，也找不到任何指向正确方向的材料！ / p>

理想情况下，我想通过SFC（.vue文件）构建一组组件并进行编译。在使用这些组件方面，应该将它们放置在现有的HTML页面上，并通过使用slot将其他HTML传递到组件中。我已经通过编译后的SFC和包含的Vue-CLI“ App”组件使后一种理论起作用。显然，这可以通过将所有内容绘制到<div id="app">...中来实现，理想情况下，我需要摆脱它并得到以下结果：

<body>
   <div id="app">
      <div class="row">
         <div class="col-xs-4">
             <filters></filters> <!-- "Filter" component -->
         </div>
         <div class="col-xs-8">
             <result-list>
                 <div>I'm a result template!</div>
             </result-list>
         </div>
      </div>
   </div>
</body>

整个页面将使用Vuex处理两个模块之间的状态。目前，如果我尝试从以下位置更改main.js（包含在vue-cli create .中）：

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

收件人：

new Vue({
  store,
  components: {
    ResultList
  },
  el: "#app"
});

这会导致控制台错误：

未知的自定义元素是否正确注册了组件？

我的初步阅读表明这是因为所有内容都已编译，因此Vue无法识别该元素，但是我更改了vue.config.js文件以确保将runtimeCompiler设置为true ，不幸的是这丝毫没有帮助。

有人能指出我正确的方向吗，也许是过去可能采用这种方法的例子，或者如果我发疯了而实际上是不可能的？

谢谢

克里斯。

Answer 1

所以看来，实际上睡觉后我设法解决了。

@skirtle，您是正确的，因为我没有将组件公开为全局组件。通过更改应用程序的挂载方式，我可以获得所需的结果。我现在可以编译所有组件，然后公开那些希望通过静态HTML使用的组件。

new Vue({
  el: '#app',
  store,
  components: {
    'result-list': ResultList
  }
})

这现在允许<result-list>容器中的HTML中动态使用#app。

VueJS SFC和DOM

1 个答案: