Question

我在文件app.vue中有此代码：

<template>
  <div id="app">
  <button v-on:click="component = 'login'">aa</button>
  <component v-bind:is="component"></component>
  </div>
</template>

<script>

import acceuil from './components/acceuil.vue'
import login from './components/login.vue'
export default {
  name: 'app',
  components: {
    acceuil,
    login
  },
   data(){
    return {
      component: 'acceuil'
    }
  }
}

</script>

如何在其他vue文件的组件的acceuil /登录之间切换？

Answer 1

您需要将导入的依赖项（对象或组件的名称作为字符串）传递给v-bind:is。您可以通过将其返回到计算函数中并将其传递给计算属性，然后在模板中使用它来实现。

<template>
  <div id="app">
    <button v-on:click="isLogin = true">Show Login</button>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script>
import acceuil from './components/acceuil.vue';
import login from './components/login.vue';

export default {
  name: 'app',
  data () {
    return {
      isLogin: false
    };
  },
  computed: {
    currentComponent () {
       return this.isLogin ? login : acceuil;
    }
  },
};
</script>

另请参见the official docs中动态组件的文档。

Vue-Cli全局更改对象值

1 个答案: