精华内容
下载资源
问答
  • 说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要...

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了

    学不完啊...没关系,看我的

    按需加载组件,或者异步组件,主要是应用了component的 is 属性

    template中的代码:

    这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

     1 <template slot-scope="scope">
     2             <el-button
     3               type="text"
     4               size="mini"
     5               @click="handleSchedule('CustomerInfoSchedule', scope.row.customer_id)"
     6             >详情</el-button>
     7             <el-button
     8               type="text"
     9               size="mini"
    10               @click="handleSchedule('VisitRecordSchedule', scope.row.customer_id)"
    11             >回访</el-button>
    12             <el-button
    13               type="text"
    14               size="mini"
    15               @click="handleSchedule('AddCustomerSchedule',scope.row.customer_id)"
    16             >编辑</el-button>
    17             <el-button
    18               type="text"
    19               size="mini"
    20               @click="handleSchedule('AddPeopleSchedule', scope.row.customer_id)"
    21             >添加联系人</el-button>
    22           </template>

     

    1 <component 
    2  :is="currentComponent" 
    3  :customer_id="customer_id" 
    4  @componentResult="componentResult"
    5 >
    6 </component>

     

    script中的代码:

    这里的组件使用request按需引入,我使用的点击事件,当事件触发的时候,引入对应的组件

    首先在data中声明组件的属性

    1 data() {
    2   return {
    3       currentComponent: "",
    4       customer_id:'',
    5    }
    6 }

    然后注册组件

    这里的组件作为一个个方法,组件名是方法名,组件内容是方法体,有几个组件就写几个方法

     1 components: {
     2     AddCustomerSchedule(resolve) {
     3       require(["../components/AddCustomer"], resolve);
     4     },
     5     AddPeopleSchedule(resolve) {
     6       require(["../components/AddPeople"], resolve);
     7     },
     8     CustomerInfoSchedule(resolve) {
     9       require(["../components/CustomerInfo"], resolve);
    10     },
    11     VisitRecordSchedule(resolve) {
    12       require(["../components/VisitRecord"], resolve);
    13     },
    14   },

    定义的方法

     1 // 这里直接接收name,然后相对应的引入组件,同时传值
     2 handleSchedule(name, id) {
     3       this.customer_id = id;
     4       this.currentComponent = name;
     5     },
     6 // 这是子组件触发父组件返回回来的方法,因为我的组件都是弹出框
     7 // 所以在子组件关闭弹出框的时候,我让this.currentComponent为空
     8 // 同时可以选择性的刷新数据
     9     componentResult(type) {
    10       if (type == "upData") {
    11         this.getTableData();
    12       } else {
    13         this.currentComponent = "";
    14       }
    15     },

     

    转载于:https://www.cnblogs.com/jun-qi/p/10931205.html

    展开全文
  • qq群(vue学习交流):482739794 ----------------------------------------------------- 先来说下项目需求: 页面的组件不是直接引入且按照顺序放在页面上的, 而是根据后端返回的数据,来判断,动态的加载...

    -----------------------------------------------------

    qq群(vue学习交流):482739794

    -----------------------------------------------------

    先来说下项目需求:

    • 页面的组件不是直接引入且按照顺序放在页面上的,
    • 而是根据后端返回的数据,来判断,动态的加载某个组件

    思路步骤:

    • 引入组件

    import TabNew from './TabNew.vue'

    • 注册组件

    components: {
          'v-TabNew-2': TabNew

    }

    • 插入组件

    itemList.push({
                          component: 'v-NewHomeAd-1',
                          classname: '',
                          vIf: adverArr ? true : false,
                          data: adverArr
                        })

    • 通过 :is 动态绑定组件

    <component :is="item.component" v-if="item.vIf" :data="item.data" :class="item.classname" v-for="(item,index) in itemList"
          :key="index"></component>

    代码展示:

    (常见的直接将组件按照位置放在页面上,一般我们都是这样写的)

    <template>
      <div id="home_new">
        <!-- 查询话费、流量 -->
        <v-TelePhoneBill />
    
        <!-- tabNew栏 -->
        <v-TabNew-2 class="tab_top" :tabNew='tabNewArr' v-if="tabNewArr" />
    
        <!-- 专区 -->
        <v-SpecialArea-3 class="special_top" :specialNew="specialArr" v-if="specialArr.length!=0" />
    
        <!-- 广告 -->
        <v-NewHomeAd :adver="adver" v-if="adverArr" />
      </div>
    </template>

    (根据后端返回的值,动态的加载组件)

    <template>
      <div id="home_new">
       
        <component :is="item.component" v-if="item.vIf" :data="item.data" :class="item.classname" v-for="(item,index) in itemList"
          :key="index"></component>
        
      </div>
    </template>
    <script> 
    // 引入需要的组件
    import TabNew from './TabNew.vue'
    import SpecialArea from './Card/SpecialArea'
    import TelePhoneBill from './TelePhoneBill'
    import NewHomeAd from './Advertise/NewHomeAd'
    export default {
        data() {
          return {
            current: "",
            msg: "",
            locationCity: '',
            // tabNewArr: '', // tabnew栏
            // specialArr: [], //专区
            cityLocation: '', // 选择地区
            // adverArr: '', // 广告
            cityTxt: '选择地区',
            currentCity: '', // 城市
            provinceCode: '', // 城市编码
            itemList: [],
            adList: ''
          }
        },
    // 注册组件
        components: {
          'v-TabNew-2': TabNew,
          'v-SpecialArea-3': SpecialArea,
          'v-TelePhoneBill-4': TelePhoneBill,
          'v-NewHomeAd-1': NewHomeAd
        },
        methods:{
          getData() {
            var that = this;
            var url = "/v1/index/getIndexPageInfo.do";
            var params = {
              provinceCode: that.cityLocation.id || that.provinceCode // 省份code  北京的
            };
            that.httpRequest(url, params)
              .then(res => {
                var res = res.data;
                console.log('====首页接口的success', res.success);
                if (res.success) {
    
                  console.log("首页请求成功", res);
                  // 专区
                  let special1, special2, special3, specialArr1 = [],
                    specialArr2 = [],
                    specialArr3 = [],
                    typeList = [],
                    obj = {},
                    itemList = [];
                  for (var i in res.body) {
                    obj[res.body[i][0].type] = i; // 设置对象,为了在switch后面用到索引
                    console.log('设置的对象', obj);
                    var item = res.body[i][0].type;
                    switch (Number(item)) {
                      case 1:
                        console.log('111')
                        let adverArr = res.body[item] // 广告
                         // 动态插入组件
                        itemList.push({
                          component: 'v-NewHomeAd-1',
                          classname: '',
                          vIf: adverArr ? true : false,
                          data: adverArr
                        })
                        break;
                      case 2: // tab栏
                        console.log('222')
                        let tabNewArr = res.body[obj[item]] // tab栏显示
                        itemList.push({
                          component: 'v-TabNew-2',
                          classname: 'tab_top',
                          vIf: tabNewArr ? true : false,
                          data: tabNewArr
                        })
                        break;
                      case 3: // 专区
                        console.log('333')
                        special3 = res.body[item] // 携号转网
                        special1 = res.body[item] // 宽带专区
                        special2 = res.body[item] // 号卡专区
                        //专区 得存在一个数组里面 specialArr
                        special1.map((item) => {
                          specialArr1.push(item)
                        })
                        special2.map((item) => {
                          specialArr2.push(item)
                        })
                        special3.map((item) => {
                          specialArr3.push(item)
                        })
                        let specialArr = [];
                        specialArr.push(specialArr1, specialArr2, specialArr3)
                        itemList.push({
                          component: 'v-SpecialArea-3',
                          classname: 'special_top',
                          vIf: specialArr.length !== 0 ? true : false,
                          data: specialArr
                        })
                        break;
                      case 4: // 话费显示
                        console.log('4444')
                        // itemList.push({
                        //   component: 'v-TelePhoneBill-4',
                        //   classname: '',
                        //   vIf: true,
                        //   data: ''
                        // })
                        break;
                      case 5:
                        console.log('555')
                        break;
                    }
                  }
                  that.itemList = itemList;
                  console.log('that.itemList', that.itemList);
                }
              })
              .catch(error => {
                console.log(error);
              });
          }
        }

    vue动态组件官方文档

    ----------完。

    展开全文
  • 说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊…没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示...
  • Vue :is动态显示组件

    2019-09-22 10:31:48
    在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中用:is来挂载不同的组件。 像下图这样,点击不同按钮,切换不同的组件...

    前面的话

    在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中用:is来挂载不同的组件。

    像下图这样,点击不同按钮,切换不同的组件:
    在这里插入图片描述

    只需在< component></ component>中绑定一个特殊的属性: is,就可以实现了。

    代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <component :is="currentView"></component>
            <button @click="handleChangeView('A')">A</button>
            <button @click="handleChangeView('B')">B</button>
            <button @click="handleChangeView('C')">C</button>
        </div>
    </body>
    </html>
    <script>
        var app = new Vue({
            el: '#app',
            components:{
                comA: {
                    template: `
                        <div>组件A</div>
                    `
                },
                comB: {
                    template: `
                        <div>组件B</div>
                    `
                },
                comC: {
                    template: `
                        <div>组件C</div>
                    `
                }
            },
            data: {
                currentView: 'comA'
            },
            methods: {
                handleChangeView(component) {
                    this.currentView = "com" + component
                }
            }
        })
    </script>
    
    展开全文
  • 1、导入所组件 1、点击左侧按钮时,将对应组件的名字保存进数组中 <ul class="components-list"> // 点击时,将对应组件名保存进数组 <li @click="dragStart('oneDiv')" data-name="oneDiv">...

    最终实现结果,如下图:

    点击不同的组件名称,界面显示相应的组件。

    实现过程

    1、导入所需的组件

    1、点击左侧按钮时,将对应组件的名字保存进数组中

          <ul class="components-list">
                // 点击时,将对应组件名保存进数组
            <li @click="dragStart('oneDiv')" data-name="oneDiv">
              <span>组件1</span>
            </li>
            <li @click="dragStart('twoDiv')" data-name="twoDiv">
              <span>组件2</span>
            </li>
            <li @click="dragStart('threeDiv')" data-name="threeDiv">
              <span>组件3</span>
            </li>
            <li class="list-group col-md-3">
              <pre style="font-size:12px">{{listString}}</pre>
            </li>
          </ul>

    2、对应的点击函数

     

    3、 componentData数组发生改变时,动态加载相应的数据,在标签<component>中,:is的值是对应的组件的名字

      <component :is="item.name" :data-name="item.name"></component>

     

    展开全文
  • 介绍atom-design经过几个月的开发,以及这段时间的修复bug,对js,css压缩,按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题,以及如何让开发者更自由、更简单的去使用。这篇文章主要讲...
  • Vue】动态添加组件的两种实现

    千次阅读 2020-01-01 11:32:09
    重要声明:本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。 ...请查看这篇文章:【Vue】页面组件懒加载,动态加载组件按需加载,路由懒加载。 在Vue项...
  • 1、最新版本下载地址(按需下载即可):http://nodejs.cn/download/ 2、安装nodejs,安装步骤就不赘述了。 3、注意:Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ,不建议安装 Python 3.0 以上版本。 4、...
  • vue+webpack实现页面的按需加载 通过vue写的单页应用时,可能会有很多的路由引入。当打包构建的时候,javascript包会变得非常大,影响加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的...
  • 结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载。 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这样会大大的增加请求的时间...
  • 1.什么是异步组件? 异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行...2.Vue实现按需加载 Vue实现按需加载,官方推荐使用结合webpack的代码分割功能进行。定义为异步加载的...
  • Vue前端项目-登录组件-登录框界面

    千次阅读 2020-03-09 15:45:16
    我们使用的是 element-ui 来做界面的, 当时我们创建项目的时候 选择组件按需导入因此当我们第一次到某组件时候需要在 src / plugins / element.js 文件中导入该组件并将组件绑定到 vue 对象 1.1 表单元素...
  • 局部注册 ,各位可以根据自己的需求来选择,我个人采用的是局部注册,按需加载。个人注册了一个公共的MapView.vue组件来实现地图的功能,存放在项目组件库components/common下。 官方文档描述1:局部注册的 ...
  • vue2.0+SVG实实现现音音乐乐播播放放圆圆形形进进度度条条组组件件 这篇文章主要为大家详细介绍了Vue2.0+SVG实现音乐播放圆形进度条组件具有一定的参考价值感兴趣的小伙 伴们可 参考一下 vue2.0+SVG实现音乐播放圆形...
  • 一、全部引入 1、安装mint-ui npm intall mint-ui --save 2、main.js中引入mint-ui import MintUI from ‘mint-ui’ import ‘mint-ui/lib/style.css’ ...二、按需引入 1、除了安装mint-ui...
  • React和Vue组件的懒加载

    千次阅读 2018-08-06 19:30:50
    懒加载,也可以成为按需加载,即页面、数据或者组件在需要加载的时候才进行加载,在开始只加载需要的最少的静态资源和数据信息,尽快的展示首屏页面。 现在先不谈技术,谈谈为什么需要按需加载。有调查显示:页面的...
  • 1. muit-UI组件全局引用没毛病,按需引用的时候 npm install babel-plugin-component -D 之前  还是先要安装npm install mint-ui -S 组件库的。。。这大概就是菜鸡的日常无脑bug 2.对于mint-UI的Tabbar引入后,...
  • 在某一个页面有多个组件需要同时引入或者按需引入,并且通过后端接口控制显示哪些组件。 <div> <component v-for="(item,index) in compList" :is="item.path" :key="index" ></component> <...
  • 用svg写的时候,发现图标不显示,只有文字显示。然后网上搜的方法,用插件实现。 安装 ...在src文件夹下新建svg文件夹,把下载好的svg的图标放入,在 vue 组件按需加载: scale:可以调试图标大小
  • 实现效果: vue2.x百度地图官网: https://dafrok.github.io/vue-baidu-map/#/zh/index 百度地图开发者平台申请的密钥...注册(只是实现某一功能的话,建议在组件按需引入,减少工程打包后的体积): <script>
  • 业务需求分析:用户在某个模块试卷答完需要交卷时,点击当前页面交卷按钮,弹出层展示,弹出层上显示该试卷还剩余的时分秒,并有可供用户选择的 “否” 和 “是” 按钮,如果用户点击“否”,则不提交答卷,且弹...
  • vue引入echarts表格时,使用的是按需引入,没有使用全局引入,这个legend是一个组件 // 引入 ECharts 主模块 let echarts = require("echarts/lib/echarts"); // 引入折线图 require("echarts/lib...
  • 今年发布了Vue3版本,新特性还挺多,有一项是按需引入组件,减小包体积的同时增加灵活度,很赞!但也引发了UI库跟不上版本的问题,比如 Element UI库,是基于vue2.x 的,目前还不支持vue3,是不是很头疼?不怕,有赞...
  • 构建可在每个屏幕上显示的精心设计的应用程序,并支持所有具有动态主题,按需组件以及易于使用的API的现代Web浏览器 演示和文档 如果您要查找以前版本的文档,请转到。 安装及使用 通过npm或纱线安装Vue材质 npm ...
  • vue开发(一)

    2020-10-14 21:23:18
    文章目录vue开发组件化开发模块化开发...将相同的页面显示变成组件,按需引入 模块化开发 概念 针对后端的代码分析的 将具有相同业务逻辑或者代码提取出来 module mixin 混合 在vue开发中,有相同的代码和逻辑,
  • radio组件显示有问题

    2020-12-09 09:51:43
    希望样式可以跟组件一起按需加载 [在这里描述期望的表现] <p><strong>观察到的表现:</strong></p> [在这里描述观察到的表现] <p><strong>屏幕截图和动态 GIF 图</strong></p> <p><img alt="复现步骤的屏幕截图和动态...
  • echarts 的图形组件按需加载,不是importechartsfrom"echarts" 就可以。 加载echarts 相关模块(提示缺什么就加载什么组件即可) main.js importechartsfrom"echarts/lib/echarts"; import'echarts/lib/chart...
  • vue中使用vue-pdf

    2020-09-04 17:35:42
    需求:简单说~~有两个pdf文件在h5上展示,通过点击按钮切换不同文件的显示 注: 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历。有多少页就加载了多少个pdf组件。 2.pdf...
  • vue-cli3.x之mint-ui按需引入 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: npm install babel-plugin-component -D 然后,...

空空如也

空空如也

1 2 3 4
收藏数 64
精华内容 25
关键字:

vue按需显示组件

vue 订阅