我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue中怎么自定义动态组件

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue中怎么自定义动态组件

Vue中怎么自定义动态组件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

举第一个栗子

用vue-cli搭建好项目目录之后,在class="lazy" data-src/components下面新建一个文件夹放我们要写的插件,如图所示:

Vue中怎么自定义动态组件

index.vue里写我们的组件,代码如下:

Vue中怎么自定义动态组件

index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下:

Vue中怎么自定义动态组件

接下来我们要在默认的main.js里将刚刚写的index.js文件导入,并通过Vue.use来使用它,代码如下:

Vue中怎么自定义动态组件

大功告成,接下来在app.vue里直接使用就可以啦,可以看到页面已经显示相应的组件了,如图:

Vue中怎么自定义动态组件

这时候我们还可以自定义click事件,并通过参数的方式传递给我们的插件,插件可以通过props属性获取到该事件,如图:

Vue中怎么自定义动态组件

可以看到页面已经生效了:

Vue中怎么自定义动态组件

Vue.component(id, [definition])用于注册或获取组件。

Vue.use(plugin)用于安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用,插件将只会被安装一次。

举第二个栗子

我们再建一个文件夹,如图:

Vue中怎么自定义动态组件

我们要写一个组件,能够显示外部传进来的内容,并在3秒后自动消失,代码如下:

Vue中怎么自定义动态组件

接下来我们要在index.js里使用构造器来创建它,如图:

Vue中怎么自定义动态组件

依旧在默认的main.js里引用刚刚的js文件,并加入到Vue实例上,这样我们就可以直接通过this.$seconddemo()来调用了,代码如下:

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

在app.vue里使用它,发现插件加载成功了,如图:

Vue中怎么自定义动态组件

Vue.extend(options)是 Vue 的构造器,用于创建一个“子类”。

统一管理自定义组件

当组件数量很多时,我们可以通过提供一个统一的出口文件来管理这些自定义组件,首先在global文件夹下新建一个index.js文件,代码如图:

Vue中怎么自定义动态组件

index.js文件帮我们把所有自定义的组件都通过Vue.component注册了,最后export一个包含install方法的对象给Vue.use()使用。

看完上述内容,你们掌握Vue中怎么自定义动态组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue中怎么自定义动态组件

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

下载Word文档

猜你喜欢

vue自定义动态组件的方法是什么

本篇内容主要讲解“vue自定义动态组件的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue自定义动态组件的方法是什么”吧! Vue.extend 思路就是拿到组件的构造函数,这样我们
2023-07-04

Vue怎么实现自定义组件自动生成

本文小编为大家详细介绍“Vue怎么实现自定义组件自动生成”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么实现自定义组件自动生成”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。就目前三大前端主流数据驱动框架
2023-07-04

vue怎么自定义keepalive组件

本文小编为大家详细介绍“vue怎么自定义keepalive组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么自定义keepalive组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。为什么会出现这种情
2023-07-02

怎么在Java中自定义动态数组

这期内容当中小编将会给大家带来有关怎么在Java中自定义动态数组,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表,实现了
2023-06-14

vue怎么自定义封装API组件

这篇文章主要介绍vue怎么自定义封装API组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!自定义封装API组件1.创建vue组件