组件使用和传参
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'/>