zoukankan      html  css  js  c++  java
  • 组件使用和传参

    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'/>

     

     

     

     

     

     

     

  • 相关阅读:
    第一节 Spring的环境搭建
    002. 配置环境变量
    001. 巧妇难为无米之炊之安装环境
    第七节 认识SpringMVC中的表单标签
    [六字真言]6.吽.SpringMVC中上传大小异常填坑
    [六字真言]4.叭.SpringMVC异常痛苦
    [六字真言]5.咪.功力不足,学习前端JavaScript异常
    [六字真言]3.呢.异常的谎言,你要相信多少次?
    [六字真言]2.嘛.异常定制和通用.md
    vim基本技巧
  • 原文地址:https://www.cnblogs.com/zhangshijiezsj/p/13944575.html
Copyright © 2011-2022 走看看