Vue.js："attach"内容要两个不同类？

Question

所以，我的 vue.js 文件中有数据，我想 "attach" 到两个不同的 classes，而不必创建另一个 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 -->

第二个HTML块

  <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 -->

所以我希望我的组件在每个这些不同的 html 块中包含相同的内容。仅附加相同的 class 就足够了吗？还有别的吗？

Answer 1

您不能将一个 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>

Example.

如果您想避免重复代码，您可以以编程方式创建您的 Vue。

each = Array.prototype.forEach;

const data = {
  name: "Vue.js",
  items: [
    {
      content: "repeat this string in various places",
    },
    {
      content: "more data",
    },
   ]
}

each.call(document.querySelectorAll(".class-one"), el => new Vue({el, data}))

Example.

Vue.js："attach"内容要两个不同类？

Vue.js: "attach" content to two different classes?

vue.js

vue-component