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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
javascript event 事件解析
Jan 31 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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通过sort()函数给数组排序的方法
2015/03/18 PHP
php如何连接sql server
2015/10/16 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP与以太坊交互详解
2018/08/24 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python样条插值的实现代码
2018/12/17 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
滞留工资返还协议书
2014/10/19 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
运动员入场前导词
2015/07/20 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书