AntDesign vue學習筆記（四）使用組件切換

同樣實現上一篇功能，

 

改為使用組件切換，實現方法如下

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

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>

即可實現切換