专栏首页前端开发随笔Vue页面中引用自定义组件

Vue页面中引用自定义组件

比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件

这里是组件的内容,引用了element ui

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
    name:"navmenu",
    data(){
        return{
 activeName: 'second'
        }
       
    },
     methods:{
    handleClick(tab, event) {
        console.log(tab, event);
      }
    }
}
</script>

<style>
</style>

这个是图释

这里是需要引入组件的地方

<template>
<div>
    <navmenu></navmenu>  <!-- 在template中引入 -->  
   </div>
</template>

<script>
 import navmenu from '../components/navmenu.vue'  //导入的路径
export default {
    components: {
    'navmenu':navmenu
    },  //然后,在components中写入子组件  
}
</script>

<style>
</style>

完成

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue实现微信授权登录

    任我行RQ
  • VantUI实现list列表分页显示

    任我行RQ
  • jQuery限制复选框checkbox的选中次数

    任我行RQ
  • Swagger2 注解说明

    DencyCheng
  • C++11新特性使用总结

    最近开始使用C++11编码,编码效率和代码质量提升不少,把目前我遇到的提升效率和代码质量的新特性都总结一下。

    阁主的小跟班
  • 【新华网】新算法让机器像婴儿一样学习视觉世界

    【新智元导读】 美国科学家日前报告说,他们从人类大脑的学习方式中获得灵感,研发出一种新的“深度学习”算法,可以让机器像人类婴儿一样自主学习视觉世界。 新华社洛杉...

    新智元
  • 机场安全性分析

    航空安全是一个很复杂的环境。几年前媒体报道DHS针对一架波音757攻击,担心一架“被黑”的飞机可能会成为针对机场新的攻击手段。

    FB客服
  • C++11:基于STL对string,wstring进行大小写转换

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • 三分钟使用webpack-dev-sever搭建一个服务器

    webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新; 1.切换到你的目录...

    李文杨
  • webpack构建优化:bundle体积从3M到400k之路

    在CQM平台开发时,把demo网站给同事体验,都纷纷反馈第一次打开页面的时候需要等待很久,页面一直在转菊花。作为一个为韩国头部厂商提供优质服务的网站,接到这种反...

    RubyLiao廖彩明

扫码关注云+社区

领取腾讯云代金券