Vue.js:“；附「；你对两个不同的班级满意吗？

因此，我的vue.js文件中有数据，我想将其“附加”到两个不同的类，而不必创建另一个vue.js组件或在另一个组件中重复内容。例如：

var fullViewContent = new Vue({
  el: ".class-one",
  data: {
    name: 'Vue.js'
  },
  data: {
    items: [{
      content: "repeat this string in various places",

    },
   ]
 }

第一个HTML块

  <div class="class-one">
      <template v-for="(item, index) in items">
        <div class="container">
           <h2>{{ item.content }}</h2>
        </div>
      </template>
  </div><!-- end list view -->

  <div class="different-html-block class-one">
      <template v-for="(item, index) in items">
        <div class="container">
           <h2>{{ item.content }}</h2>
        </div>
      </template>
  </div><!-- end list view -->

{{item.content}

第二个HTML块

  <div class="class-one">
      <template v-for="(item, index) in items">
        <div class="container">
           <h2>{{ item.content }}</h2>
        </div>
      </template>
  </div><!-- end list view -->

  <div class="different-html-block class-one">
      <template v-for="(item, index) in items">
        <div class="container">
           <h2>{{ item.content }}</h2>
        </div>
      </template>
  </div><!-- end list view -->

{{item.content}

---

因此，我希望在每个不同的html块中都有相同的组件内容。仅仅将同一个类附加到它就足够了吗？还有什么吗？

不能对多个元素应用Vue

而是将共享数据移动到两个VUE均可访问的对象中

const shared = {
  items: [
    {
      content: "repeat this string in various places",
    },
    {
      content: "more data",
    },
   ]
}

var app1 = new Vue({
  el: "#app1",
  data: {
    name: 'Vue.js',
    items: shared.items
  },
})

var app2 = new Vue({
  el: "#app2",
  data: {
    name: 'Vue.js',
    items: shared.items
  }
})

模板呢

<div id="app1">
  <div class="class-one">
      <template v-for="(item, index) in items">
        <div class="container">
           <h2>{{ item.content }}</h2>
        </div>
      </template>
  </div><!-- end list view -->
</div>

<div id="app2">
  <div class="different-html-block class-one">
      <template v-for="(item, index) in items">
        <div class="container">
           <h2>{{ item.content }}</h2>
        </div>
      </template>
  </div><!-- end list view -->
</div>