广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue export default中的name属性有哪些作用
  • 345
分享到

Vue export default中的name属性有哪些作用

2024-04-02 19:04:59 345人浏览 薄情痞子
摘要

目录Vue export default的name属性作用1.组件自身的递归调用2.当我们使用vue.js官方提供的调试工具调试3.最后一种应该是使用比较多的情况Vue如何获取组件n

Vue export default的name属性作用

在划分模块和创建单页面组件时,常常写到name。嵌套路由中,index.vue极为常见。

那么在vue中,export default { name: ‘xxx’} 中的name到底有啥作用呢?

还是先回到官方的文档:官方链接

在这里插入图片描述

官方文档已经给我们描述了两种使用情况,可能在开发中,并不是常用,举例子说明一下。

1.组件自身的递归调用

就是在当前组件中,调用组件自己

componentA.vue

<template>
  <div class="component-a">
    <!-- 一个简单的树形组件 -->
    <tree :treeData="treeData"></tree>
  </div>
</template>
<script>
export default {
    name: 'component-a',
    data() {
      return {
        treeData: [{
          title: '树形标题一',
          expand: true,
          children: [{
            title: '子标题1',
            expand: true
          },
          {
            title: '子标题2',
            expand: true,
            children: [{
              title: '子标题2.1',
              expand: true
            },
            {
              title: '子标题2.2',
              expand: true
            },
            {
              title: '子标题2.3',
              expand: true
            }]
          }]
      }
    },
    components: {
      // 自定义组件
      tree: {
        // 组件的名称
        name: 'tree',
        // 模板
        template: ` 
            <ul>
               <li v-for="item in treeData">
                 <span>{{item.title}}</span>
             <!-- 在组件内部调用自己 -->
                 <tree v-if="item.children" :treeData="item.children"></tree >
               </li>
            </ul>`,
        // 通过父组件传递的数据
        props: ['treeData']
      }
    },
    methods: {}
  }
</script>

在这里插入图片描述

2.当我们使用vue.js官方提供的调试工具调试

可以看到组件的名称,更好地定位

在这里插入图片描述

3.最后一种应该是使用比较多的情况

就是当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。

在这里插入图片描述

这就是vue.js中组件export default 中name的三种作用。调试和keep-alive是我们开发中常用的功能,关于组件的递归调用,还是第一次实践,递归时,大家一定要注意递归的条件,否则会进入死循环。

Vue如何获取组件name属性

Vue在编写组件时一般都会显式的指明其name属性

获取name属性

this.$options.name

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: Vue export default中的name属性有哪些作用

本文链接: https://www.lsjlt.com/news/144546.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue export default中的name属性有哪些作用
    目录Vue export default的name属性作用1.组件自身的递归调用2.当我们使用vue.js官方提供的调试工具调试3.最后一种应该是使用比较多的情况Vue如何获取组件n...
    99+
    2022-11-13
  • html中id属性和name属性有哪些区别
    小编给大家分享一下html中id属性和name属性有哪些区别,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! html中的id属性 我们使用id属性可以标识唯一的HTML元素,可以在在U...
    99+
    2022-10-19
  • vue中有哪些属性
    vue中常用的属性有7个,分别是el属性、data属性、template属性、methods属性、render属性、computed属性、watch属性等。用法介绍:el属性:用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一...
    99+
    2022-10-12
  • Vue中计算属性有哪些
    这篇文章主要为大家展示了“Vue中计算属性有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中计算属性有哪些”这篇文章吧。何为计算属性:大白话讲就是计算出来的结果保存在属性当中,可以想象...
    99+
    2023-06-25
  • JavaScript中arguments.callee属性有哪些作用
    这篇文章主要讲解了“JavaScript中arguments.callee属性有哪些作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中arguments.callee属...
    99+
    2023-07-02
  • vue常见的属性有哪些
    vue中常见的属性有:1.el属性,指示vue编译器解析的位置;2.data属性,将组织从view中抽象出;3.template属性,设置模板;4.methods属性,放置页面中的业务逻辑;5.computed属性,计算属性;6.watch...
    99+
    2022-10-24
  • vue的实例属性有哪些
    vue中的实例属性有:1.$data属性,vur实例观察的数据对象;2.$options属性,当前vue实例的初始化选项;3.$slot属性,当前组件树的根vue实例;4.listeners属性,包含了父作用域中的时间监听器;5.$attr...
    99+
    2022-10-05
  • CSS filter属性的作用有哪些
    CSS filter属性用于对元素进行图像处理,可以改变图像的颜色、亮度、对比度、饱和度等。具体的作用包括:1. blur:模糊图像...
    99+
    2023-09-05
    CSS
  • Android应用中SearchView属性的作用有哪些
    这期内容当中小编将会给大家带来有关Android应用中SearchView属性的作用有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。SearchView是搜索框组件,它可以让用户在文本框里输入文字,通...
    99+
    2023-05-31
    android searchview
  • android gravity属性有哪些作用
    Android中的gravity属性用于指定View中内容的对齐方式。以下是常用的gravity属性值及其作用:- left:将内容...
    99+
    2023-10-18
    android
  • vue中router-link标签的属性有哪些
    这篇文章将为大家详细讲解有关vue中router-link标签的属性有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。to表示目标路由的链接。 当被点击后,内部会立刻把...
    99+
    2022-10-19
  • jQuery的操作属性有哪些
    这篇文章主要介绍jQuery的操作属性有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、操作属性1、读取属性值:attr(属性名)取得以第一匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性...
    99+
    2023-06-29
  • FeignClient中name和url属性的作用说明
    目录name和url属性的作用定义场景解释@FeignClient注解属性vaule和name 其实是一个属性关于调用目前有两种name和url属性的作用 定义 feign是声明式的...
    99+
    2022-11-13
  • CSS中有哪些常用的属性
    本篇内容主要讲解“CSS中有哪些常用的属性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中有哪些常用的属性”吧!CSS 指的是层叠样式表 (Cascading Style Sheets),...
    99+
    2023-06-27
  • CSS制作动画的属性有哪些
    这篇文章给大家分享的是有关CSS制作动画的属性有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   一:transition   transition允许我们在CSS属性...
    99+
    2022-10-19
  • ASP.NET控件中有用的属性有哪些
    这篇文章将为大家详细讲解有关ASP.NET控件中有用的属性有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、ClientIDMode渲染ASP.NET控件时会自动生成一个ID,当我们在客户端脚本中引...
    99+
    2023-06-17
  • HTML5中表单的常用属性及新属性有哪些
    HTML5中表单的常用属性及新属性有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。HTML5 新的表单属性HTML5 的 <form...
    99+
    2022-10-19
  • asp中DropDownList的属性有哪些
    在ASP中,DropDownList控件的属性包括:1. AutoPostBack:指定当选择项改变时是否立即触发服务器端的事件。2...
    99+
    2023-09-25
    asp
  • vb中command的属性有哪些
    在VB中,Command对象有以下属性: ActiveConnection:获取或设置打开的连接对象。 CommandText:获...
    99+
    2023-10-28
    vb
  • html中iframe的属性有哪些
    HTML中iframe元素的属性有以下几个:1. src: 指定要在iframe中显示的页面的URL。2. frameborder:...
    99+
    2023-09-13
    html
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作