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

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，Vue.component

：

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 精神......