vue的component的用法简单配置

component的第一种用法

<template>
	<div>
	    <Menu />   //在这里使用
	    <componentC />
	</div>
</template>

<script>
import Menu from "@/components/index/menu.vue";  //从外部引用
     let componentC={
            template:`<div>I am componentC</div>`
     }  //这里是自己定义的一段代码
	export default {
	components: {
      Menu   //这里类似于声明，声明后才可在template中使用
      componentC
    }
	}
</script>

components可在script中加载一些自己制定的页面，代码 比如从外部引用进来，或手写一段代码加载到页面当中

component的第二种用法 占位

<template>

<div id="app">
    <a href="#" @click.prevent="flag='Mtop'">第一个页面</a>
    <a href="#" @click.prevent="flag='Menu'">第二个页面</a>
    <a href="#" @click.prevent="flag='UserList'">第三个页面</a>
    
    <transition mode="out-in">
        <component :is="flag"></component>
        //component相当于一个占位符  可根据flag当中的值来改变要引入的页面  
    </transition>
</template>

<script>
import Menu from "@/components/index/menu.vue";  
import Mtop from "@/components/index/top/indextop.vue";
import UserList from "@/components/Mymain/UserList/";
//依然是从外部引入
	export default {
	data() {
    return {
      flag: "Mtop" //这里先给一个默认值
	}
	},components: {
		Mtop:Mtop,
    	Menu：Menu, 
    	UserList:UserList 
    }
	}
</script>

• 小结transition可实现引用页面之间的切换，这对我们开发的效率有很大的提升

  !component的第三种用法 路由

<template>
<el-menu-item-group>
    <el-menu-item index="/MyActilist">购物车</el-menu-item>
    <el-menu-item index="/Myjiesuan">结算</el-menu-item>
</el-menu-item-group>
            
<div id="app">
      <router-view></router-view> //router-view相当于一个占位符 会把页面加载到这个地方
</template>

<script>
import jiesuan from '@/components/Mymain/jiesuan/';
import UserList from "@/components/Mymain/UserList/";
//依然是从外部引入
	export default {
	components: {
		 jiesuan ,
	     UserList
    }
	}
</script>

简单来说就是在主页面之内配置几个子页面让他跳转的时候在主页面内加载那些子页面

//这里是router 的index.js 配置路由的页面
import Userlist from '@/components/Mymain/UserList/';
import myindex from '@/components/index/myindex/'
import jiesuan from '@/components/Mymain/jiesuan/';

export default new Router({
  routes: [
   {     //Myindex 是那个主页面
      path: "/Myindex", component: myindex,
      children: [   //这里面配置那些要切换的页面
        { path: "/MyUserList", component: Userlist },
        { path: "/Myjiesuan", component: jiesuan }
      ]
  ]
  });

这是第三种使用component的方法也是我在开发中使用最频繁的一种通过配置路由之后可快速的实现业务的需求。

注意：在第三种中使用到了路由没有的小伙伴 将"vue-router": “^3.0.1”, 这段代码粘贴到package.json 中下载路由即可

写入之后在cmd中 vue install 会自动下载

代码千万行，注释第一行。格式不规范，报错两行泪!