AntDesign vue学习笔记（四）使用组件切换

小鱼儿 2021-11-01 08:42 500阅读 0赞

同样实现上一篇功能，

![427803-20190627112837392-891843046.png][]

改为使用组件切换，实现方法如下

1、修改MainFrm中的<router-view/>如下代码

![427803-20190627111056227-685277238.png][]

2、注册局部组件

export default {
      name: 'MainFrm',
      data () {
        return {
          collapsed: false,
          page: Student
        }
      },
      methods: {
        menu (s) {
          console.log(s)
          this.page = s
        }
      },
      components: {
         StudentClass,
         Student
      }
    }

此处自定义的Student组件未实现install方法的话，使用Vue.Use(Student)可能不起作用，如果需要使用，需要在组件中增加install方法，看网上的实现例子

自定义vue全局组件use使用(解释vue.use()的原理)
    我们在前面学习到是用别人的组件：Vue.use(VueRouter)、Vue.use(Mint)等等。
    其实使用的这些都是全剧组件，这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理
    而我们再用Axios做交互，则不能使用Vue.use(Axios)，因为Axios没有install
    
    
    自定义一个全局Loading组件，并使用：
    总结目录：
    |-components
    　　|-loading
    　　　　|-index.js    导出组件，并且install
    　　　　|-loading.vue    定义Loading组件，这里面基本的style ,script中之前讲的methods,data方法都可以使用
    
    index.js中的代码：
    import LoadingComponent from './loading.vue'
    　　const Loading={
    　　　　install:function(Vue){ //核心部分，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件
    　　　　Vue.component('loading',LoadingComponent);
    　　}
    };
    export default Loading;
    
    main.js中要使用：
    　　import loading from './components/loading'
    　　Vue.use(loading); //调用的是install里面的组件
    转自：https://www.cnblogs.com/yufann/p/Vue-Node8.html

3、修改菜单点击代码

<a-sub-menu key="sub3">
       <span slot="title">
        <a-icon type="pie-chart"/>学生
       </span>
       <a-menu-item key="7" @click="menu('Student')">学生</a-menu-item>
     </a-sub-menu>

即可实现切换

转载于:https://www.cnblogs.com/zhaogaojian/p/11096004.html

[427803-20190627112837392-891843046.png]: /images/20211101/f41143feddfe4a109a140815a6f0adb1.png
[427803-20190627111056227-685277238.png]: /images/20211101/00af0cde31b44427ad39b0989ec2c0f2.png