精华内容
下载资源
问答
  • 这是一个Vue日历的组件,可以切换周和月的显示模式(另有动画效果)
  • VUE实现日历组件功能

    2020-08-31 03:04:45
    本篇文章主要介绍了VUE实现日历组件功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • export default { name: "content1", components: {Component1,Component2}, } </script> 以上方式使用静态import的方式引入组件,无法灵活的按需引入组件,最多控制显示哪个。 我总结了几种按需动态加载组件的方法...

    vue引入组件的方法一般如下
    先编写两个被引入的组件

    组件1:component1.vue

    <template>
        <div>
          <h3>组件1</h3>
        </div>
    </template>
    
    <script>
        export default {
            name: "Component1"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    组件2:component2.vue

    <template>
        <div>
          <h3>组件2</h3>
        </div>
    </template>
    
    <script>
        export default {
            name: "Component2"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    然后组件中引入以上组件

    <template>
      <div class="container">
        <component1/>
        <component2/>
      </div>
    </template>
    <script>
    import Component1 from "component1.vue";
    import Component2 from "component2.vue";
    export default {
      name: "content1",
      components: {Component1,Component2},
    }
    </script>
    

    以上方式使用静态import的方式引入组件,无法灵活的按需引入组件,最多控制显示哪个。

    我总结了几种按需动态加载组件的方法,vue版本2.6.11

    方法一

    通过动态修改components内组件指向的方式实现异步动态加载组件

    <template>
      <div class="wrapper">
        <h3 style="text-align: left">ComponentsMode</h3>
        <button @click="show = false">销毁</button>
        <button @click="switchComponent('component1')">组件1</button>
        <button @click="switchComponent('component2')">组件2</button>
        <div class="a">
          <model-page v-if="show"></model-page>
        </div>
      </div>
    </template>
    
    <script>
    import Component1 from "component1";
    
    export default {
      name: "AsyncComponent",
      components: {
        /*
        * 这里使用import()实现异步加载组件, 而且component可以改成变量, 但正常注册组件的行为只会执行一次,
        * 即使component的值改变, 或者本组件重新加载, 也无法重新注册组件, 所以这里只能实现延迟加载组件的的功能
        * 可以使用折中方法,给组件套个父级,通过销毁和创建父级的方法重新注册组件,实现动态组件功能,不再赘述
        * */
        ModelPage: () => {
          let component = 'component1';
          /*import()本身支持变量, 但一方面许多浏览器对import()支持不佳, 另一方面, 项目需要使用webpack编译, 使用变量webpack无法判断哪些文件需要编译
          而且微博pack编译打包后, js文件被打包到app.js, 浏览器不可能只加载一个文件的一部分, 这时单独import毫无意义,
          webpack提供了解决方法, import的路径仅文件名使用变量, 目录路径使用常量, webpack编译打包时会把该路径下所有js单独打包, 而不是合并到app.js
          * */
          return import(`./${component}`);
        }
      },
      data() {
        return {
          show: false,
          apps: null,
        }
      },
      methods: {
        /*
        * 通过动态修改$options的components内的组件实现动态异步加载组件的功能
        * */
        switchComponent: function (component) {
          this.$options.components['ModelPage'] = () => import(`./${component}`);
    
          //由于components改变后视图不会自动刷新, 需要手动刷新, 也可以使用this.$forceUpdate()
          this.show = false;
          let that = this;
          this.$nextTick(() => {
            that.show = true;
          })
        }
      },
    }
    </script>
    
    <style scoped>
    .wrapper {
      padding: 15px;
    }
    
    .a {
      text-align: left;
      height: 100px;
      border: 1px solid blue;
      margin-top: 20px;
    }
    </style>
    

    方法二

    使用Vue.extend实现异步加载组件
    这种方式生成的vue实例虽然可以通过propsData传参, 但实例没有parent, 没有上下文, 但不能实现双向绑定, 可以通过直接调用实例方法或者实例事件的方式通讯

    <template>
      <div class="wrapper">
        <h3 style="text-align:left;">extendMode</h3>
        <button @click="switchComponent('component1')">组件1</button>
        <button @click="switchComponent('component2')">组件2</button>
        <div class="a">
          <div id="mount-point" ref="mount-point"></div>
        </div>
      </div>
    
    </template>
    
    <script>
        import Vue from 'vue';
    
        export default {
            name: "ExtendMode",
            data(){
                return {
                    instance: null
                }
            },
            methods: {
                switchComponent: function (name) {
                    if(this.instance){
                        this.instance.$destroy();
                        this.$refs['mount-point'].removeChild(this.instance.$el);
                    }
                    import(`./${name}`).then(component => {
                        let VueConstructor = Vue.extend(component.default); //使用Vue.extend创建组件构造器
                        this.instance = new VueConstructor();
                        this.instance.$mount();
                        this.$refs['mount-point'].appendChild(this.instance.$el);//挂载到指定dom上
                    });
                }
            }
        }
    </script>
    
    <style scoped>
      .wrapper {
        padding: 15px;
      }
    
      .a {
        text-align: left;
        height: 100px;
        border: 1px solid blue;
        margin-top: 20px;
      }
    </style>
    

    方法三

    通过特殊 attribute is实现动态异步加载组件功能
    is的值可以是组件命名, 也可以是组件选项对象, 这里使用的是后者, 使用动态修改is指向的组件选项对象, 实现动态异步加载组件

    <template>
      <div class="wrapper">
        <h3 style="text-align: left">IsMode</h3>
        <button @click="show = false">销毁</button>
        <button @click="switchComponent('component1')">组件1</button>
        <button @click="switchComponent('component2')">组件2</button>
        <div class="a">
          <component :is="apps" v-if="show"></component>
        </div>
      </div>
    </template>
    
    <script>
    
        export default {
            name: "IsMode",
            data() {
                return {
                    show: false,
                    apps: null,
                }
            },
            methods: {
                switchComponent: function (component) {
                    this.apps = () => import(`./${component}`);
                    this.show = true;
                }
            },
        }
    </script>
    
    <style scoped>
      .wrapper {
        padding: 15px;
      }
    
      .a {
        text-align: left;
        height: 100px;
        border: 1px solid blue;
        margin-top: 20px;
      }
    </style>
    
    

    方法四

    和方法三类似, 只不过使用的是全局组件注册方式实现

    <template>
      <div class="wrapper">
        <h3 style="text-align:left;">VueComponentMode</h3>
        <button @click="show = false">销毁</button>
        <button @click="switchComponent('component1')">组件1</button>
        <button @click="switchComponent('component2')">组件2</button>
        <div class="a">
          <component :is="apps" v-if="show"></component>
        </div>
      </div>
    </template>
    
    <script>
        import Vue from 'vue';
    
        export default {
            name: "VueComponent",
            data() {
                return {
                    show: false,
                    apps: 'ModelPage',
                }
            },
            methods: {
                /*
                * 通过动态注册全局组件实现动态异步加载组件的功能
                * */
                switchComponent: function (component) {
                    Vue.component('ModelPage', () => import(`./${component}`));
    
                    //由于components改变后视图不会自动刷新, 需要手动刷新, 也可以使用this.$forceUpdate()
                    this.show = false;
                    let that = this;
                    window.setTimeout(function () {
                        that.show = true;
                    })
                }
            }
        }
    </script>
    
    <style scoped>
      .wrapper {
        padding: 15px;
      }
    
      .a {
        text-align: left;
        height: 100px;
        border: 1px solid blue;
        margin-top: 20px;
      }
    </style>
    
    
    展开全文
  • Vue项目按需引入Vant组件

    千次阅读 2020-01-15 14:08:21
    1.安装Vant ...按照官网上写的,安装babel 插件后,就能在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 官网上说在.babelrc 中添加配置 { "p...

    1.安装Vant

    # 通过 npm 安装
    npm i vant -S
    
    # 通过 yarn 安装
    yarn add vant

    2.安装babel 插件

    按照官网上写的,安装babel 插件后,就能在编译过程中将 import 的写法自动转换为按需引入的方式

    # 安装插件
    npm i babel-plugin-import -D

    官网上说在.babelrc 中添加配置

    {
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }

    不过在项目里发现.babelrc文件中还有其他内容

    "plugins": ["transform-vue-jsx", "transform-runtime"]

    都是字符串,和需要添加的格式不大一样。没关系,直接加在后面就好。加好后的就是这样:

      "plugins": ["transform-vue-jsx", "transform-runtime",
        [
          "import",
          {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style":true
          }
        ]
      ]

    3.在页面里引用

    import { Button } from 'vant';

    官网到这就完了。但是你会发现一运行还是报错,

    还得把组件注册一下。

    用了Vux组件库的伙伴会习惯这样写

    components: { Grid, GridItem }

    一运行还是报错,那是因为使用的vux模板已经帮忙处理好了。

    而对于Vant正确写法应该是

      components: {
        [Grid.name]: Grid,
        [GridItem.name]: GridItem
      }

    页面完整内容就是

    <template>
      <div class="wrapper">
        <van-grid :column-num="3">
          <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字"/>
        </van-grid>
      </div>
    </template>
    
    <script>
    import { Grid, GridItem } from "vant";
    export default {
      components: {
        [Grid.name]: Grid,
        [GridItem.name]: GridItem
      },
      props: {},
      data() {
        return {};
      },
      methods: {}
    };
    </script>
    

     

    展开全文
  • vue组件嵌套组件显示 使用条件指令 (Using conditional directives) The simplest option is to use the v-if and v-else directives. 最简单的选择是使用v-if和v-else指令。 Here’s an example. The v-if ...

    vue组件嵌套组件不显示

    使用条件指令 (Using conditional directives)

    The simplest option is to use the v-if and v-else directives.

    最简单的选择是使用v-ifv-else指令。

    Here’s an example. The v-if directive checks the noTodos computed property, which returns false if the state property todos contains at least one item:

    这是一个例子。 v-if指令检查noTodos计算属性,如果state属性todos包含至少一项,则返回false:

    <template>
      <main>
        <AddFirstTodo v-if="noTodos" />
        <div v-else>
          <AddTodo />
          <Todos :todos=todos />
        </div>
      </main>
    </template>
    
    <script>
    export default {
      data() {
        return {
          todos: [],
        }
      },
      computed: {
        noTodos() {
          return this.todos.length === 0
        }
      }
    }
    </script>

    This allows to solve the needs of many applications without reaching for more complex setups. Conditionals can be nested, too, like this:

    这样可以解决许多应用程序的需求,而无需进行更复杂的设置。 条件语句也可以嵌套,如下所示:

    <template>
      <main>
        <Component1 v-if="shouldShowComponent1" />
        <div v-else>
          <Component2 v-if="shouldShowComponent2" />
          <div v-else>
            <Component3 />
          </div>
        </div>
      </main>
    </template>

    使用component Component and is (Using the component Component and is)

    Instead of creating v-if and v-else structures, you can build your template so that there’s a placeholder that will be dynamically assigned a component.

    您可以构建模板,而不是创建v-ifv-else结构,以便有一个占位符将动态分配给组件。

    That’s what the component component does, with the help of the v-bind:is directive.

    这就是component组件在v-bind:is指令的帮助下所做的事情。

    <component v-bind:is="componentName"></component>

    componentName is a property of the state that identifies the name of the component that we want to render. It can be part of the state, or a computed property:

    componentName是状态的属性,用于标识我们要呈现的组件的名称。 它可以是状态的一部分,也可以是计算属性:

    <script>
    export default {
      data() {
        return {
          componentName: 'aComponent',
        }
      }
    }
    </script>

    翻译自: https://flaviocopes.com/vue-dynamically-show-components/

    vue组件嵌套组件不显示

    展开全文
  • 一开始父组件显示,子组件隐藏。 点击父组件按钮,父组件隐藏自身,子组件显示。 点击子组件按钮,子组件隐藏,父组件显示 解决办法: 父组件引入子组件,并注册,绑定相关变量和值。 父组件下的代码 show...

    问题:

    一开始父组件显示,子组件隐藏。

    点击父组件按钮,父组件隐藏自身,子组件显示。

    点击子组件按钮,子组件隐藏,父组件显示

     

    解决办法

    父组件引入子组件,并注册,绑定相关变量和值。

    父组件下的代码

    showTable 为隐藏显示整个父组件

    引入子组件,并注册子组件

    showList 为隐藏显示整个子组件

    声明需要使用或传递的变量

     子组件上绑定 showList,初始值为false,即为隐藏子组件。同时双向绑定showList该值,并绑定一个方法parEvn。

    父组件相应方法中控制定义的变量属性

     点击按钮隐藏父组件,显示子组件。

     


    子组件下的代码

    首先接收父组件传递过来的参数

    该参数为双向绑定下的值,父组件中点击后改变的值,传给子组件

    子组件里面定义了初始化值为false,这个值是为了通过$emit传给父组件的。

    子组件点击相应按钮,调用父组件中绑定的方法,并传递一个参数为false。

    父组件下的方法

     

    父组件下接收子组件传递的值,进行相应的变量改变。

     

     

     

     

     

    展开全文
  • ant-design-vue按需引入icon以及组件

    万次阅读 多人点赞 2020-05-12 19:15:26
    vue的评分组件显示在页面了: 接着我们再打开一个命令行终端,我们进行打包压缩分析,在新开的命令行终端输入npm run build,如下图: 然后我们打开ant-vue-demo/dist/report.html:如图: 可以看到我们就引了一个...
  • Vue组件显示问题

    千次阅读 2021-03-17 21:41:42
    Vue组件显示问题 刚开始按照vue.js的文档学习,自动写代码时发现了完全按照官网的例子写的代码,但是浏览器就是显示不出来,找了半天才发现是因为没有创建Vue的实例,废话不多说直接上代码。 <body> <...
  • Vue组件显示与隐藏

    千次阅读 2020-07-30 00:18:15
    Vue组件显示与隐藏 第一步 使用v-show 1.1 父组件 1.2 子组件 2 第二步 父子组件传参 2.1 父组件 2.2 子组件 Vue组件显示与隐藏 在使用Vue开发前端页面的过程中,经常都会遇到...
  • 1、同一组件中实现不同元素切换 <template> <div class="page"> <div class="button"> <span @click="show(1)" :class="index===1? 'active':''">组件一</span> <span .
  • vue表格组件 VUE组件 (vue-table-component) A simple Vue component to display tables. Support sortable ... 一个简单的Vue组件显示表格。 支持可排序的列,分页和自定义CSS样式。 Example with 2 Table ...
  • 如图:两个组件在页面上不显示 原因: < template> (将要渲染的HTML)必须是包含在一个标签里面的。 解决: 最外层加个div包起来就行 代码示例: 在App.vue中引入一个组件 App.vue <template> <...
  • 由于 pcHome 和 mvHome 里面都用到了 swiper 插件,所以用 v-if 老是...访问之后就出问题了,组件内的东西都显示不出来,用 vConsole 调试工具查看 html 结构,结构都有,就是不展示,这可急死我了,以前也没碰到这...
  • 文章目录概述实现过程Step1: 父组件设置Button按钮Step2: 这里使用了showHandlerFlag来控制子组件是否显示,所里需要在data中定义下这个变量Step3: 引用声明组件Step4:使用v-if条件渲染控制是否显示组件Step5: 子...
  • 一个可切换周视图和月视图的vue日历组件,并且可以显示日程安排及事件标注
  • vue 文本显示组件 Vue高亮输入 (Vue Highlightable Input) Highlight and style specific words as you're typing. 键入时突出显示和设置特定单词的样式。 View demo 查看演示 Download Source 下载源 安装 ...
  • Vue自定义组件显示

    千次阅读 2020-01-11 10:42:41
    Vue官网教程找copy的例子,但发现浏览器中却不显示,代码如下: <html> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <a-test post-title="hello!"></a-...
  • VUE 实现点击按钮,动态加载组件

    千次阅读 2020-12-11 08:36:02
    需求:每点击一次添加按钮... 废话不多说,直接上代码!!!! A.vue(父组件) <div class="filter-container" style="margin-top: 25px"> <el-button class="filter-item" type="primary" icon="el-icon-
  • Vue 动态显示组件 component :is

    千次阅读 2020-05-16 10:33:50
    1、导入所组件 1、点击左侧按钮时,将对应组件的名字保存进数组中 <ul class="components-list"> // 点击时,将对应组件名保存进数组 <li @click="dragStart('oneDiv')" data-name="oneDiv">...
  • 使用子组件是,并不是子组件的name属性叫啥就可以直接拿来用 而是使用的子组件文件名,大小可转换 例如:文件名:DevTable,组件中的name属性为:op-table 这个时候,可以直接使用 <dev-table></dev-table&...
  • vue点击按钮动态创建与删除组件

    千次阅读 2019-12-27 14:28:12
    主要功能需求点: ...删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> ...
  • Vue自定义组件实现按钮权限功能

    千次阅读 2018-10-26 18:54:08
    在这之前请看我上一篇博客https://blog.csdn.net/qq_41594146/article/details/83381964,这里有思路和数据库设置,之前做的是没有组件化,也就是单纯的v-for循环直接显示,刚刚写了按钮权限的组件,现在贴上代码\ ...
  • vue组件显示,没报错,但是该显示组件没有显示, 这里面我们需要注意一个问题,就是 template (将要渲染的HTML)必须是包含在一个标签里面的,这个和react 比较像,是个小坑,所以他没有报错; 最外层...
  • Vue全家桶之组件化开发

    千次阅读 多人点赞 2020-01-06 07:56:26
    学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数据交互方式,组件插槽的用法,vue调式工具的用法,组件的方式来实现业务逻辑功能。 组件化开发思想,组件注册,组件调式,组件间的数据交互,...
  • vue 大屏数据展示组件

    千次阅读 2019-12-18 13:04:55
    http://datav.jiaminghi.com/guide/ 事例:
  • vue项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,方便维护。很多情况下,父组件中都会引用子组件这种情况。通过给在父组件中引用的子组件标签上添加属性,来渲染可以拥有不同数据的子组件。...
  • vue 局部组件显示 问题

    千次阅读 2019-07-05 10:13:12
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例From菜鸟教程改编(runoob.com)<...script src="https://cdn.staticfile.org/vue/2.2.2...
  • vue组件显示,没起作用,没报错,但是该显示组件没有显示 转: https://blog.csdn.net/shaleilei/article/details/79147924 vue组件显示,没报错,但是该显示组件没有显示, 这里面我们需要注意一个问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,524
精华内容 36,609
关键字:

vue按需显示组件

vue 订阅