小编Smi*_*Ray的帖子

我一直在尝试使用 Vue.js 开发轮播，但我对过渡效果感到困惑。以下是我的代码，

// Main component    
      <slider>
        <slide v-for="(slide, index) in compOpts.blockImg" :key="index">
          <img :src="slide" :alt="features ${index}`">
        </slide>
      </slider>

// Slider component
    <transition-group class="slider__container" name="slideTr" tag="div" appear mode="out-in">
      <slot></slot>
    </transition-group>

  import slide from './contentSliderSlide';

  export default {
    name: 'slider',
    data: () => ({
      slideCount: 0,
      activeSlide: 0,
      currentSlide: null,
      lastSlide: null,
      slideInterval: null
    }),
    mounted() {
      this.init();
    },
    methods: {
      getSlideCount() {
        this.slideCount = (
          this.$slots
          && this.$slots.default
          && this.$slots.default.filter(
            slot => slot.tag
              && slot.tag.indexOf('slide') > -1
          ).length
        ) || …

我正在尝试从api数据呈现或加载组件。为了进一步说明，假设我有测试组件，可以直接将其注入到我的父组件中。但是，当我尝试将component标签保存在数据库中并运行ajax调用时，我的component标签会显示但不起作用，或者是加载/渲染。请帮忙。

从我的API返回：

{
    "_id": "59411b05015ec22b5bcf814b",
    "createdAt": "2017-06-14T11:16:21.662Z",
    "updatedAt": "2017-06-14T12:41:28.069Z",
    "name": "Home",
    "content": "<test-comp></test-comp>",
    "slug": "/",
    "navName": "Home",
    "__v": 0,
    "landing": true,
    "published": false
}

我的父组件：

<template>
  <div>
    <test-comp></test-comp> // This works
    <div v-html="page.content"></div> // But this doesn't :(
  </div>
</template>

<script>
  import { Api as defApi } from 'shared';
  import test from './testComp';

  export default {
    data: () => ({
      page: {}
    }),
    created() {
      defApi.get('api/pages/landing')
      .then((res) => {
        this.page = res.data.body;
      });
    },
    components: {
      testComp: test
    }
  }; …

我有一个问题虽然很傻但我真的需要知道.如果我们使用axios,那么我应该将它作为依赖项或devdependencies安装吗？据我所知,webpack会将其捆绑在供应商文件中,然后将其作为依赖项安装在生产服务器中是没有意义的.请指教