Question

我想将Vue single file components与以下约束一起使用：

我有3个单一文件组件：主要App和2个子组件ComponentA和ComponentB。
我有一个由某些服务器端应用程序生成的普通html页面。像这样：

<html>
<body>
<App>
.. some markup

  <ComponentA />

.. some other markup

  <ComponentB />

</App>
</body>
</html>

我如何让vue-loader编译我的单个文件组件并针对页面中的标记实例化它们而不修改页面内容，显然，渲染<ComponentA/>和{{1} }？

Answer 1

我认为您要做的是将componentA和componentB添加为app的子组件。

示例：

import ComponentA from './componentA.vue';
import ComponentB from './componentB.vue';

export default {
 data () {
  return {
   greeting: 'example'
  }
},
components: {
 componentA: ComponentA,
 componentB, ComponentB
 }
}

然后在你的app.vue html标签

<span> example filler text </span>
 <component-a><ComponentA>
<div> example</div>
  <component-a><ComponentB>

或

您可能希望将componentA和componentB添加为app组件中的子插槽。

参见示例： https://github.com/vuejs/vue/issues/7178

如何在普通的webapp中使用Vue单个文件组件？

1 个答案: