Vue 动态添加模板数据

动态添加不同类型的模板数据

v-if或者v-else-if

 <template v-for="item of zone">
        <component v-if="item.tempCode==='HOT_ACTIVITY_TMP'"
                   :key="item.tempCode"
                   :is="'HotZoneTemplate'"
                   :info="item"></component>
        <component v-else-if="item.tempCode==='PRO_SERVICE_TMP'"
                   :key="item.tempCode"
                   :is="'ServeZoneTemplate'"
                   :info="item"></component>
      </template>

• :is属性对应的当前的模板名字，需要字符串形势，否则写了就会导致报错。

 Property or method "Template1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>

意思就是该模板名字需要 在data中申明，或者直接写成字符串模板名

写法1——模板直接单引号字符串模板名

<template>
  <div>
    <template v-for="item of list">
      <component v-if="item.tempCode===1"
                 :key="item.tempCode"
                 :is="'Template1'"></component>
      <component v-if="item.tempCode===2"
                 :key="item.tempCode"
                 :is="'Template2'"></component>
    </template>
  </div>
</template>

写法2——data中返回该字符串

<template>
  <div>
    <template v-for="item of list">
      <component v-if="item.tempCode===1"
                 :key="item.tempCode"
                 :is="'Template1'"></component>
      <component v-if="item.tempCode===2"
                 :key="item.tempCode"
                 :is="'Template2'"></component>
    </template>
  </div>
</template>

<script>
import Template1 from './Template1'
import Template2 from './Template2'

export default {
  components: {
    Template1,
    Template2
  },
  data () {
    return {
      list: [],
      Template1,
      Template2
    }
  },