Vue动态创建注册component的实例代码


Posted in Javascript onJune 14, 2019

前言

在深入了解Vue动态创建Component前先了解一下常规组件声明形式。

Vue 的组件通常可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 单文件组件 。

常规组件声明与注册

// 定义一个名为 button-counter 全局注册的组件
Vue.component("button-counter", {
 template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
 data() {
  return {
   count: 0
  }
 }
});

new Vue({
 template: `
  <div id="app">
   <h1>App Component</h1>
   <button-counter></button-counter>
  </div>
 `
}).$mount("#app");

在上面的代码中我们声明了一个叫做 button-counter 的组件。如果在常规情况下使用的话,只需要在页面上写对应的 <button-counter></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: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
 data() {
  return {
   count: 0
  }
 }
});

new Vue({
 template: `
  <div id="app">
   <h1>App Component</h1>
   <button @click="insert">click to insert button-counter comonent</button>
   <div id="insert-container"></div>
  </div>
 `,
 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: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
 data() {
  return {
   count: 0
  }
 }
};

new Vue({
 template: `
  <div id="app">
   <h1>App Component</h1>
   <button @click="insert">click to insert button-counter comonent</button>
   <div id="insert-container"></div>
  </div>
 `,
 methods: {
  insert() {
   const ButtonCounter = Vue.extend(ButtonCounterComponent);
   const instance = new ButtonCounter();
   instance.$mount("#insert-container");
  }
 }
}).$mount("#app");

单文件应用

在实际使用场景里,大部分都是用脚手架构建到项目,使用 *.vue 这种单文件方式注册组件。

<template></template>
<script>
export default {
 data() {
  return {
   msg: "hello"
  }
 },
 created() {},
 mounted() {},
 destroy() {}
};
</script>
<style scoped></style>

import *.vue 返回的就是模版中 script 中 export 部分。

总结

至此,我们知道了,全局组件动态注册 和 局部组件动态注册 的使用方法和注意事项,我们可以结合实际情况去选择不同方案进行搭配即可。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
基于Proxy的小程序状态管理实现
Jun 14 #Javascript
深度了解vue.js中hooks的相关知识
Jun 14 #Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 #Javascript
在Vue中使用icon 字体图标的方法
Jun 14 #Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 #Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 #Javascript
vue路由插件之vue-route
Jun 13 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
元旦获奖感言
2014/03/08 职场文书
体现团队精神的口号
2014/06/06 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
高中教师个人工作总结
2015/02/10 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python