Vue动态创建注册component的实例代码
前端  /  管理员 发布于 4年前   697
前言
在深入了解Vue动态创建Component前先了解一下常规组件声明形式。
Vue 的组件通常可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 单文件组件 。
常规组件声明与注册
// 定义一个名为 button-counter 全局注册的组件Vue.component("button-counter", { template: '', data() { return { count: 0 } }});new Vue({ template: `App Component
`}).$mount("#app"); 在上面的代码中我们声明了一个叫做 button-counter 的组件。如果在常规情况下使用的话,只需要在页面上写对应的
标签就够了。 全局创建注册组件可以实现动态创建,但是我们必须在 template 声明使用该组件,而且如果把所有组件都全局注册这并不是一个好办法。
在官方文档中我们可以看到,我们可以通过 Vue.component('component-name') 的方式来注册一个组件。
而组件实例又有 $mount 这样一个方法,官方对于 $mount 的解释如下:
vm.$mount( [elementOrSelector] )
Arguments:
{Element | string} [elementOrSelector]
{boolean} [hydrating]
Returns: vm - the instance itself
Usage:
If a Vue instance didn't receive the el option at instantiation, it will be in “unmounted” state, without an associated DOM element. vm.$mount() can be used to manually start the mounting of an unmounted Vue instance.
If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.
The method returns the instance itself so you can chain other instance methods after it.那我们是否可以通过这种方式来达到我们的需求呢?
还不够!
为什么???
因为 Vue.component 返回的结果是一个 function!它返回的并不是 组件实例,而是一个构造函数。
那到这里其实我们就清楚了。 对于 Vue.component 声明的组件,我们先通过 Vue.component 获取它的构造函数,再 new 出一个组件实例,最后 通过 $mount 挂载到 html 上。
// 定义一个名为 button-counter 全局注册的组件Vue.component("button-counter", { template: '', data() { return { count: 0 } }});new Vue({ template: `App Component
`, methods: { insert() { const ButtonCounter = Vue.component("button-counter"); // 只能查找到全局注册到组件 const instance = new ButtonCounter(); instance.$mount("#insert-container"); } }}).$mount("#app");上述代码中,Vue.component 先获取到组件的构造函数,然后构造实例,通过实例的一些方法来处理数据和挂载节点。
但是我们发现 Vue.component 只负责全局注册或查找。
如果想要针对局部注册的组件使用动态创建并添加我们需要使用 Vue.extend 基础Vue构造器创建"子类"达到目的。
其实 Vue.component 方法传入的选项是一个对象时,Vue自动调用 Vue.extend。
完整代码示例:
const ButtonCounterComponent = { template: '', data() { return { count: 0 } }};new Vue({ template: `App Component
`, methods: { insert() { const ButtonCounter = Vue.extend(ButtonCounterComponent); const instance = new ButtonCounter(); instance.$mount("#insert-container"); } }}).$mount("#app");单文件应用
在实际使用场景里,大部分都是用脚手架构建到项目,使用 *.vue 这种单文件方式注册组件。
import *.vue 返回的就是模版中 script 中 export 部分。
总结
至此,我们知道了,全局组件动态注册 和 局部组件动态注册 的使用方法和注意事项,我们可以结合实际情况去选择不同方案进行搭配即可。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家的支持。
您可能感兴趣的文章:
- 基于vue-upload-component封装一个图片上传组件的示例
- 浅谈Vue内置component组件的应用场景
- 详解Vue 中 extend 、component 、mixins 、extends 的区别
- 关于vue.extend和vue.component的区别浅析
- Vue工程模板文件 webpack打包配置方法
- vue-cli的webpack模板项目配置文件分析
- vue动态配置模板 ''component is''代码
Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- 近期评论
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号