VueJS SFC 和 DOM答案

【问题标题】：VueJS SFC and DOMVueJS SFC 和 DOM
【发布时间】：2019-11-15 14:31:41
【问题描述】：

我正在尝试实现我认为应该可能的事情，但是，目前我无法实现它，也没有找到任何指向正确方向的材料！

理想情况下，我想通过 SFC（.vue 文件）构建一组组件并编译这些组件。在使用这些组件方面，它们应该能够放置在现有的 HTML 页面上，并且通过使用 slot 将额外的 HTML 传递到组件中。我已经通过编译的 SFC 和包含的 Vue-CLI“应用程序”组件获得了后一种理论。这显然可以通过将所有内容绘制到<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，不幸的是这无济于事丝毫。

谁能指出我正确的方向，也许是过去可能采用这种方法的例子，或者我快疯了但实际上不可能？

谢谢，

克里斯。

【问题讨论】：

将其添加到components 部分就足够了。您确定错误消息引用的是<result-list> 而不是<filters>？

标签： vuejs2 vue-component

【解决方案1】：

所以看来，在真正睡觉之后，我设法解决了这个问题。

@skirtle 你是对的，因为我没有将组件公开为全局组件。通过改变我的应用程序的安装方式，我能够得到我需要的结果。我现在认为我可以编译所有组件，然后公开那些我希望通过静态 HTML 使用的组件。

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

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

【讨论】：