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

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

即可实现切换

以上是 AntDesign vue学习笔记（四）使用组件切换 的全部内容， 来源链接： utcz.com/z/380088.html

回到顶部