Question

所以，我在我的vue.js文件中有数据，我想＆＃34;附加＆＃34;两个不同的类，而不必创建另一个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块中使用我的组件中的相同内容。仅仅将相同的类附加到它上面就足够了吗？还有别的吗？

Answer 1

您不能将Vue应用于多个元素。

相反，将共享数据移动到两个Vues都可访问的对象中。

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

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

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：＆＃34;附加＆＃34;内容到两个不同的类？

1 个答案: