Question

我正在尝试创建一个简单的24小时时间输入，我可以在多个浏览器中使用。

过去我使用Vue创建在页面上使用过一次的组件，然后将它们附加到id，如下所示：

<script>
    $(function () {
        new Vue({
            el: "#my-time-element"
        });
    });
</script>

但是当我想在一个页面中多次使用它时会发生什么？我尝试使用类定义附加它（附加到.my-element），但它只渲染第一个匹配元素。（该组件在全球注册。）

也许我应该将页面包装在一个Vue组件中，然后将我的时间组件嵌入其模板中？也许我需要创建所有.my-element元素的jQuery集合，然后循环并为每个元素实例化Vue？解决这个问题的正确方法是什么？

Answer 1

也许我应该将页面包装在一个Vue组件中，然后将我的时间组件嵌入其模板中？

这绝对是最简单的方法。

与常规HTML页面相比，您不必更改太多内容：只需确保为您的一个根容器提供ID，然后在您喜欢的任何地方和任意次使用自定义组件标记。

您只需首先使用Vue.component全局声明自定义组件来准备Vue：

Vue.component('my-component', {
  template: '#my-component',
});

new Vue({
  el: '#app',
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <h1>Hello World</h1>
  <my-component>Component instance 1</my-component>
  <my-component>Component instance 2</my-component>
</div>

<template id="my-component">
  <div style="border: 1px solid black">
    <h2>My component</h2>
    <slot></slot>
  </div>
</template>

也许我需要创建所有.my-element元素的jQuery集合，然后循环并为每个元素实例化Vue？

这也是一种可能的解决方案，但可能会打败Vue精神......

在一个页面中多次使用Vue组件的正确方法

1 个答案: