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 會自動下載

代碼千萬行，註釋第一行。格式不規範，報錯兩行淚!