精华内容
下载资源
问答
  • Vue中什么是动态组件

    千次阅读 2019-09-30 10:46:23
    简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不...

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件

    简单的说,动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不显示,如:

    <template>
      <div class="home">
          <component :is="currentComponent"></component>
      </div>
    </template>
    <script>
    import Tab0 from "@/components/Tab0.vue";
    import Tab1 from "@/components/Tab1.vue";
    export default {
        data: () => {
            return {
                currentIndex: 0 // 通过改变currentIndex改变要挂载的组件名
            }
        },
        components: {
            "tab-0": Tab0,
            "tab-1": Tab1
        }
        currentComponent() { // 动态计算要挂载的组件的组件名
          return `tab-${this.currentIndex}`; // "tab-0" 、"tab-1"
        }
    }
    </script>
    

    缓存<keep-alive>

    • 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
    • 可以将动态组件放到组件内对动态组件进行缓存,这样动态组件进行切换的时候,就不会每次都重新创建了。
    <template>
      <div class="home">
         <keep-alive>
              <component :is="currentComponent"></component>
         </keep-alive>
      </div>
    </template>
    
    展开全文
  • Vue中组件什么

    千次阅读 2020-03-25 18:37:41
    组件Vue中的一个重要概念,是一个可以重复使用的Vue是可以复用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例,所以它们与new Vue...

    组件是Vue中的一个重要概念,是一个可以重复使用的Vue是可以复用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例,所以它们与new Vue()接收相同的选项,例如data,computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

    例如,在一个绝大多数的系统网页中,网页都包含header、menu、body、footer等部分,在很多时候,同一个系统中的多个页面,可能仅仅是页面元素设计成一个个组件,当需要使用到的时候,引用这个组件即可。

    不过,与在编写C#是对代码进行模块化的划分不同,模块化主要是为了实现每个模块、方法的职能单一,一般是通过代码逻辑的角度进行划分;而Vue中的组件化,更多的是为了实现对于前端UI组件的重用。

    展开全文
  • vue中内置的组件

    万次阅读 2018-04-29 20:28:15
    Vue中内置的组件有以下几种:1)component2)transition3)transition-group4)keep-alive5)slot1)component组件:有两个属性---is inline-template渲染一个‘元组件’为动态组件,按照'is'特性的值来渲染成那个...

    Vue中内置的组件有以下几种:

    1)component

    2)transition

    3)transition-group

    4)keep-alive

    5)slot


    1)component组件:有两个属性---is    inline-template

    渲染一个‘元组件’为动态组件,按照'is'特性的值来渲染成那个组件

    2)transition组件:为组件的载入和切换提供动画效果,具有非常强的可定制性,支持16个属性和12个事件

    3)transition-group:作为多个元素/组件的过渡效果

    4)keep-alive:包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

    5)slot:作为组件模板之中的内容分发插槽,slot元素自身将被替换


    详情请看官网API:点击打开链接








    展开全文
  • 今日,怂怂就为带来一篇前端vue干货,如何在vue中创建自定义组件,并且在项目引入自定义的组件;具有很好的参考价值,一起跟怂怂过来吧,如若对您有所帮助,别忘了在文章右上角点个赞哦。 1,在你的项目专门...

          今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件;

          具有很好的教学价值,希望小伙伴们根据这篇文章可以有所收获,建议小伙伴们先收藏后阅读哦。

          小伙伴们如果觉得文章不错,点赞、收藏、评论,分享走一起呀,记得给bug菌来个一键三连~~

          好了,我们开始这期的正文吧。

    #1、在你的项目中专门创建一个放置自定义组件的文件夹(我是放在了components底下的common中,分类好日后方便维护,本文以table.vue为例)

    #2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式(本文为例:<v-table></v-table>,因为我在定义table模块的时候定义了name:v-table,所以引用的时候,也必须得用所在table模块中name定义好的名字);

    #3、在index.vue中引入table.vue模块 ;如下:

    //index.vue 页面 ,引入v-table模块
    <div class="table">
        <v-table></v-table> //这就是你引入的自定义模块;注意是驼峰命名法
    </div>

    #4、在index.vue页面引入该组件(注意:table.vue,我是在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)

    //index.vue
    <script>
      import vTable from '../../components/common/table'  //table.vue(注意,我在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)
        export default {
            name: "index",
          components: {
                vTable
            },
        }
    </script>

    ps:说白了,自定义组件就好比封装,把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。

    #5、另外,为了防止在同一页面写入过多的代码,不方便后期维护,便可以把整个页面分成多个小模块,然后在主页面进行模块引入,创建包括引入步骤都是一样的。

    比如:

    总结:

    vue组件命名问题:

    1、别用驼峰式命名 因为 vue   webpack编译后 ,他统一会变成小写(顾名思义:骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母,例如:myFirstName、myLastName,这就叫驼峰命名;你们学会了吗)

    2、组件命名最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>


    ❤如果文章对您有所帮助,就请在文章末尾的左下角把大拇指点亮吧!(#^.^#);

    ❤如果喜欢bug菌分享的文章,就请给bug菌点个关注吧!(๑′ᴗ‵๑)づ╭❤~;

    ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号:708072830】;

    ❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复参与讨论(请勿发表攻击言论,谢谢);

    ❤版权声明:本文为博主原创文章,转载请附上原文出处链接和本文声明,版权所有,盗版必究!(*^▽^*).

    展开全文
  • Vue组件

    万次阅读 多人点赞 2021-01-25 15:43:45
    Vue组件(一)      Vue组件介绍  ...组件中data 和 el 选项      使用 <script> 或 <template> 标签 V组件 组件系统是Vue
  • vue中使用loading组件

    千次阅读 2018-10-30 15:12:20
    vue项目自定义组件实现异步请求数据,在获取到数据之前有一个loading的动态图,使界面更友好 在这里定义一个loading组件: loading.vue: &lt;template&gt; &lt;div class="loading-img&...
  • Vue组件什么Vue组件的使用

    千次阅读 2020-04-13 17:45:09
    组件是什么? 组件是可复用的 Vue 实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面就直接引入即可那么我们可以将其抽出为一个组件进行复用。...Vue组件的使用 ...
  • vue中多层嵌套组件父子孙组件传参

    千次阅读 2020-09-01 17:09:09
    组件father.vue组件child1.vue 孙子组件child2.vue 三者是层层嵌套关系 #mermaid-svg-pa1BlDlRZvOK9eQ0 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333...
  • 什么是组件组件的出现就是为了拆分vue实例的代码量的,能够让我们以不同的组件划分不同的功能模块 组件化和模块化的区别 模块化是从代码的逻辑角度进行划分的:方便代码的分层开发,保证每个功能模块的功能单一...
  • Vue中封装input组件

    万次阅读 2017-07-31 22:22:55
    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉。今天要将的时如何自定义封装input组件 博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目的UI图是这样的 代码如下...
  • vue中动态修改组件样式

    千次阅读 2020-07-07 18:18:24
    一般我们vue中动态修改一个组件的样式会用 :class :style等方法。 今天我在修改一个组件样式的时候发现覆盖不了原有样式 于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css...
  • vue中echarts封装组件

    千次阅读 2020-03-30 15:12:10
    echart封装组件echart封装组件echart组件代码调用组件页面调用 echart封装组件 最近有个需求页面,有很多echart图表一个一个写太麻烦,自己琢磨+借鉴大佬的代码封装了一个 echart组件代码 <template> <div :...
  • vue中的动态组件

    千次阅读 2018-03-15 20:01:37
    在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板切换,就是用vue中&lt;component&gt;用:is来挂载不同的组件。&lt;div id=&...
  • 教女朋友学习 vue中组件

    万次阅读 多人点赞 2020-04-28 15:56:48
    这篇博客对Vue中组件的基本知识做了详细的介绍,并有完整的示例。
  • vue中面包屑组件

    千次阅读 2019-06-22 16:07:54
    现在没啥时间,但是总体来说根据网上例子做出来了。 贴以下参考网址,等有空了再来总结分析 https://segmentfault.com/a/1190000010574901 https://blog.csdn.net/thinshootout/article/details/83054245 ...
  • vue中的mounted组件

    千次阅读 2020-11-25 09:36:41
    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、...3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情 类型:Function 详细: e
  • Vue中关于父子组件之间的通信

    千次阅读 2019-06-20 23:07:54
    父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理。 总的来说父传子是通过props,子传父是通过$emit。 简单的一个demo来说说,先上代码 父组件: 如图,HelloWorld是一个子组件,将它引入父组件并注册...
  • 一、vue组件的概念: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义标签,所有的 Vue 组件同时也都是 Vue 的实例(对象)。commonJS,AMD...
  • vue笔记——vue中的子组件引用

    万次阅读 2017-12-08 15:50:54
    在javascript直接访问子组件,可以使用ref为子组件指定一个引用ID var parent = new Vue({ el: '#parent' }) // 访问子组件实例 var child = parent.$refs.profile $refs 只在组件渲染完成后才填充,并且它...
  • vue项目引入组件

    千次阅读 2019-08-10 15:50:00
    一个页面,是一个组件,他也是由多个组件构成的。 第一个问题,项目怎么引入页面? 使用v-cli自动搭建脚手架,他已经给我们配好了路由,还做好了一个HelloWorld的界面。 那么这个界面是怎么被引...
  • vue中,从上一个组件切换过来之后,这个页面的表格,显示的还是上个页面的表格的数据
  • VueVue 引入表格组件 vxe-table

    千次阅读 热门讨论 2020-03-03 12:03:48
    vxe-table:一款基于 Vue 开发出来的非常优秀的表格组件,提供了各类操作表格的方法,相关链接如下 git:https://gitee.com/xuliangzhan_admin/vxe-table 文档:...
  • vue中百度地图组件,点聚合

    千次阅读 热门讨论 2019-04-28 15:22:49
    vue项目,安装百度地图组件后(在我的上一篇文章已介绍vue安装百度地图依赖包,以及使用(模块化引入百度地图)),但如何对点位进行聚合呢? 首先,我们可以看百度地图组件官网:注意红框框选(后面讲到官网这个...
  • vue中动态渲染组件的方法

    万次阅读 2019-08-03 16:40:24
    在项目,我们会经常遇到动态加载不同组件(内容)的场景,也就是想通过一个页面,根据不同的参数或者条件,来加载不同的内容。那在vue里,给大家提供了一个很简单的方法,使用component组件来实现以上功能: <...
  • vue中实现基础组件——拖拽组件

    万次阅读 2018-09-19 15:36:20
    pc端开发需要拖拽组件完成列表的顺序交换,一般移动端的UI组件会包含,但是我在用的iview并没有此功能的组件,于是手写一个,实现起来很简单。效果图如下: 可以拖拽完成新排序,点击某一项可以触发相关事件. ...
  • Vue开发常用组件

    千次阅读 2019-04-09 16:13:40
    1. vue-countTo (它是一个vue组件,将在指定的持续时间内计入目标数) 安装使用: npm install vue-count-to 例子: <template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'>&...
  • vue中引用轮播图组件

    千次阅读 2017-09-13 10:26:13
    vue中引用官方组件的方法,即vue引用官方vue-carousel轮播图组件的方法。
  • Vue笔记——Vue组件中引入jQuery

    千次阅读 2018-10-14 14:43:55
    但是如果要在Vue组件中使用jQuery库的话,使用这样的方式就不行了,需要使用以下方法 一、安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save #...
  • VUE组件(全局组件和局部组件)

    千次阅读 2020-06-24 22:16:47
    Vue组件之全局组件与局部组件的使用详解 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况...
  • vue中在个别组件中给body添加类名

    千次阅读 2019-07-01 10:57:15
    首先我给body加类名是更改element-ui下拉框的背景色, beforeCreate() { document.getElementsByTagName("body")[0].className="equipment-body"; }, beforeDestroy(){ document.body.removeAttribute("class...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 349,094
精华内容 139,637
关键字:

vue中什么是组件

vue 订阅