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>

即可实现切换

 

posted @ 2019-06-27 11:25  zhaogaojian  阅读(3736)  评论(0编辑  收藏  举报