组件使用和传参

1 共同页面

<template>

      <a-menu theme="dark" mode="inline" :default-selected-keys="defaulted">
        <a-menu-item key="1">
          <a-icon type="user"/>
          <!-- <a href=""><span>菜单1</span></a> -->
         <span > <router-link to="/add_worker">添加工单 </router-link></span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span><router-link to="/home">我的用户 </router-link></span>
        </a-menu-item>
        
      </a-menu>
 
</template>



<script>

import md5 from 'js-md5';


export default {
  data () {
    return {
   defaulted:[this.menu_number+""]   // 参数
  }
  },
  //接收参数
  props:['menu_number'],
  //注册组件标签
  components:{


  },
  mounted:function(){

   
},

    
  
}

</script>

　　

2 页面调用和传参

<script> import leftmenu from './leftmenu.vue'    //导入组件 import user_home from './user_home.vue'     export default{。。。。。。 }

3 调用组件 和传参

 

 

<leftmenu menu_number='2'/>

1 共同页面

<template>
​
      <a-menu theme="dark" mode="inline" :default-selected-keys="defaulted">
        <a-menu-item key="1">
          <a-icon type="user"/>
          <!-- <a href=""><span>菜单1</span></a> -->
         <span > <router-link to="/add_worker">添加工单 </router-link></span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span><router-link to="/home">我的用户 </router-link></span>
        </a-menu-item>
        
      </a-menu>

</template>
​
​
​
<script>
​
import md5 from 'js-md5';
​
​
export default {
  data () {
    return {
   defaulted:[this.menu_number+""]   // 参数
  }
  },
  //接收参数
  props:['menu_number'],
  //注册组件标签
  components:{
​
​
  },
  mounted:function(){
​
   
},
​
    
  
}
​
</script>
​
​
​
​

 

2 页面调用和传参

 

<script> import leftmenu from './leftmenu.vue'    //导入组件 import user_home from './user_home.vue'     export default{。。。。。。 }

 

components:{ //注册组件

'leftmenu':leftmenu,

'user_home':user_home

 

},

3 调用组件 和传参

<leftmenu menu_number='2'/>