Question

由于某些原因，vue转换对我的动态组件不起作用。这是我的代码。

<template>
    <div>
        <component :is="currentView" transition="fade" transition-mode="out-in"></component>

        <button class="btn btn-info" @click="currentView='category'">Cat</button>
        <button class="btn btn-info" @click="currentView='catvideo'">video</button>
    </div>
</template>

<script>
Vue.component('category', require('./category.vue'));
Vue.component('catvideo', require('./catvideo.vue'));
export default {
    data(){
        return {
            currentView: 'category',
            cat:cat,
            showCat:false,
            showVideo:false
        }
    }
 }
 </script>
<style>

.fade-transition {
   transition: opacity 0.2s ease;
 }

.fade-enter, .fade-leave {
  opacity: 0;
}
</style>

我将category.vue文件放在一个单独的文件夹中，里面有一个循环覆盖一些数据，catvideo.vue是一个简单的静态html。

提前致谢。

Answer 1

<template>
  <div>
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component v-bind:is="componentPage"></component>
      </keep-alive>
    </transition>

    <button class="btn btn-info" v-on:click="componentPage = 'category-Page'">
      Cat
    </button>
    <button class="btn btn-info" v-on:click="componentPage = 'catvideo-Page'">
      video
    </button>
  </div>
</template>

<script>
import category from "@./category.vue";
import catvideo from "@./catvideo.vue";

export default {
  name: "category",
  components: {
    "category-Page": category,
    "catvideo-Page": catvideo,
  },
  data() {
    return {
      componentPage: "category-Page",
    };
  },
  methods: {
    tabs() {},
  },
};
</script>

<style>
.fade-transition {
  transition: opacity 0.2s ease;
}

.fade-enter,
.fade-leave {
  opacity: 0;
}
</style>

Answer 2

好的，我解决了。我需要在组件标记之外使用过渡标记。 :)

动态组件的Vue转换

2 个答案: