组件切换骚操作你晓得嘛

• 2020 年 1 月 2 日
• 筆記

本文标识 : V00012

本文编辑 : Jack 风 编程工具 : Vscode 阅读时长 : 3分钟

使用flag标识符结合v-if和v-else切换组件

页面结构：

 <div id="app">      <input type="button" value="toggle" @click="flag=!flag">      <my-com1 v-if="flag"></my-com1>      <my-com2 v-else="flag"></my-com2>    </div>

Vue实例定义：

 <script>      Vue.component('myCom1', {        template: '<h3>欢迎</h3>'      })        Vue.component('myCom2', {        template: '<h3>关注A2Data</h3>'      })        // 创建 Vue 实例，得到 ViewModel      var vm = new Vue({        el: '#app',        data: {          flag: true        },        methods: {}      });    </script>

使用:is属性来切换不同的子组件,并添加切换动画

组件实例定义方式：

 // 登录组件      const login = Vue.extend({        template: `<div>          <h3>登录组件</h3>        </div>`      });      Vue.component('login', login);        // 注册组件      const register = Vue.extend({        template: `<div>          <h3>注册组件</h3>        </div>`      });      Vue.component('register', register);        // 创建 Vue 实例，得到 ViewModel      var vm = new Vue({        el: '#app',        data: { comName: 'login' },        methods: {}      });

使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

  <div id="app">      <a href="#" @click.prevent="comName='login'">登录</a>      <a href="#" @click.prevent="comName='register'">注册</a>      <hr>      <transition mode="out-in">        <component :is="comName"></component>      </transition>    </div>  添加切换样式：      <style>      .v-enter,      .v-leave-to {        opacity: 0;        transform: translateX(30px);      }        .v-enter-active,      .v-leave-active {        position: absolute;        transition: all 0.3s ease;      }        h3{        margin: 0;      }    </style>

效果如下