vue 组件切换

  在Vue的学习过程中，组件化是其一大特点，通过将某一组件的html,css,js放入vue中提高代码的维护性。真正地开发过程中，页面都是由组件拼接而成的。那么问题就出现了，在页面中触发某一事件来进行组件之间的转换时如何实现的。而且这两个组件之间又是如何传值的？

一、使用v-if ,v-esle命令来切换

 <popmenu  v-bind:message="mes" v-else="iscel"></popmenu> 
 <popup  v-bind:message="msg" @func="getok" v-if="iscel"></popup>

组件间的切换，通过iscel变量true或false来设置

使用v-if和v-else实现切换，但只能在两个组件间相互切换，不能实现多个组件的切换。并且两个组件必须有一个存在

二，使用两个v-if命令来解决在特定条件下切换不同的组件

1.在页面确定好两个或多个组件的位置

 <popmenu v-bind:message="mes" v-if="isc"></popmenu> 
 <popup  v-bind:message="msg" @func="getok" v-if="iscel"></popup>

2.组件间的切换，通过某事件

    getok(){
          //两个组件之间的切换
          this.iscel=false;
          this.isc=true;
    }

优化后效果图：

三、组件转换,使用v-bind命令和component元素

1.引入组件

<script>
import popup from "_c/popup-tip/components/popup"
import popmenu from "_c/popup-tip/components/popmenu"

export default {
  name: 'order',
  components:{
    "popup":popup,
    "popmenu":popmenu,
  }，
  data(){
    return{
     who:''
    }
  }
}
  

2.确定组件的位置并引入

  <div align="right">
       <Button type="button" class="btn-info" @click="Withdrawal">退餐</Button> 
        <component :is="who"></component>
   </div> 

3.选择不同的组件

 methods:{
    Withdrawal(){
     this.who='popmenu';
    },
 }