vue2 自定义动态组件所遇到的问题


Posted in Javascript onJune 08, 2017

下面讲一下如何定义动态组件。

 Vue.extend

 思路就是拿到组件的构造函数,这样我们就可以new了。而Vue.extend可以做到:https://cn.vuejs.org/v2/api/#Vue-extend

// 创建构造器
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
 return {
  firstName: 'Walter',
  lastName: 'White',
  alias: 'Heisenberg'
 }
 }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

官方提供了这个示例,我们进行一下改造,做一个简单的消息提示框。

动态组件实现

创建一个vue文件。widgets/alert/src/main.vue

<template>
 <transition name="el-message-fade">
<div v-show="visible" class="my-msg">{{message}}</div>
 </transition>
</template>
<script >
 export default{
  data(){
   return{
    message:'',
    visible:true
   } 
  },
  methods:{
   close(){
    setTimeout(()=>{
      this.visible = false;
    },2000)
   },
  },
  mounted() {
  this.close();
  }
 }
</script>

这是我们组件的构成。如果是第一节中,我们可以把他放到components对象中就可以用了,但是这儿我们要通过构造函数去创建它。再创建一个widgets/alert/src/main.js

import Vue from 'vue';
let MyMsgConstructor = Vue.extend(require('./main.vue'));
let instance;
var MyMsg=function(msg){
 instance= new MyMsgConstructor({
  data:{
   message:msg
}})
//如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
instance.$mount();
 document.body.appendChild(instance.$el)
 return instance;
}
export default MyMsg;
require('./main.vue')返回的是一个组件初始对象,对应Vue.extend( options )中的options,这个地方等价于下面的代码:
import alert from './main.vue'
let MyMsgConstructor = Vue.extend(alert);

而MyMsgConstructor如下。

 参考源码中的this._init,会对参数进行合并,再按照生命周期运行:

Vue.prototype._init = function (options) {
 ...// merge options
 if (options && options._isComponent) {
  // optimize internal component instantiation
  // since dynamic options merging is pretty slow, and none of the
  // internal component options needs special treatment.
  initInternalComponent(vm, options);
 } else {
  vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),
  options || {},
  vm
  );
 }
// expose real self
 vm._self = vm;
 initLifecycle(vm);
 initEvents(vm);
 initRender(vm);
 callHook(vm, 'beforeCreate');
 initInjections(vm); // resolve injections before data/props
 initState(vm);
 initProvide(vm); // resolve provide after data/props
 callHook(vm, 'created');
 ...
 if (vm.$options.el) {
  vm.$mount(vm.$options.el);
 }
 };

而调用$mount()是为了获得一个挂载实例。这个示例就是instance.$el。

vue2 自定义动态组件所遇到的问题

可以在构造方法中传入el对象(注意上面源码中的mark部分,也是进行了挂载vm.$mount(vm.$options.el),但是如果你没有传入el,new之后不会有$el对象的,就需要手动调用$mount()。这个方法可以直接传入元素id。

instance= new MessageConstructor({
  el:".leftlist",
  data:{
   message:msg
}})

 这个el不能直接写在vue文件中,会报错。接下来我们可以简单粗暴的将其设置为Vue对象。

调用

在main.js引入我们的组件:

//..
import VueResource from 'vue-resource'
import MyMsg from './widgets/alert/src/main.js';
//..
//Vue.component("MyMsg", MyMsg);
Vue.prototype.$mymsg = MyMsg;

然后在页面上测试一下:

<el-button type="primary" @click='test'>主要按钮</el-button>
//..
 methods:{
 test(){
 this.$mymsg("hello vue");
 }
 }

这样就实现了基本的传参。最好是在close方法中移除元素:

vue2 自定义动态组件所遇到的问题

close(){
 setTimeout(()=>{
  this.visible = false;
  this.$el.parentNode.removeChild(this.$el);
  },2000)
 },

 回调处理

回调和传参大同小异,可以直接在构造函数中传入。先修改下main.vue中的close方法:

export default{
  data(){
   return{
    message:'',
    visible:true
   } 
  },
  methods:{
   close(){
    setTimeout(()=>{
      this.visible = false;
      this.$el.parentNode.removeChild(this.$el);
    if (typeof this.onClose === 'function') {
     this.onClose(this);
    }
    },2000)
   },
  },
  mounted() {
  this.close();
  }
 }

如果存在onClose方法就执行这个回调。而在初始状态并没有这个方法。然后在main.js中可以传入

var MyMsg=function(msg,callback){
 instance= new MyMsgConstructor({
  data:{
   message:msg
 },
 methods:{
  onClose:callback
 } 
})

这里的参数和原始参数是合并的关系,而不是覆盖。这个时候再调用的地方修改下,就可以执行回调了。

test(){
  this.$mymsg("hello vue",()=>{
  console.log("closed..")
  });
 },

你可以直接重写close方法,但这样不推荐,因为可能搞乱之前的逻辑且可能存在重复的编码。现在就灵活多了。

统一管理

 如果随着自定义动态组件的增加,在main.js中逐个添加就显得很繁琐。所以这里我们可以让widgets提供一个统一的出口,日后也方便复用。在widgets下新建一个index.js

import MyMsg from './alert/src/main.js';
const components = [MyMsg];
let install =function(Vue){
 components.map(component => {
 Vue.component(component.name, component);
 });
 Vue.prototype.$mymsg = MyMsg;
}
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
};
export default {
 install
}

在这里将所有自定义的组件通过Vue.component注册。最后export一个install方法就可以了。因为接下来要使用Vue.use。

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

也就是把所有的组件当插件提供:在main.js中加入下面的代码即可。

...
import VueResource from 'vue-resource'
import Widgets from './Widgets/index.js'

...
Vue.use(Widgets)

这样就很简洁了。

小结: 通过Vue.extend和Vue.use的使用,我们自定义的组件更具有灵活性,而且结构很简明,基于此我们可以构建自己的UI库。以上来自于对Element源码的学习。

widgets部分源码:http://files.cnblogs.com/files/stoneniqiu/widgets.zip

以上所述是小编给大家介绍的vue2 自定义动态组件所遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
js消除图片小游戏代码
Dec 11 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
vue.js中过滤器的使用教程
Jun 08 #Javascript
了解VUE的render函数的使用
Jun 08 #Javascript
Node.js 使用命令行工具检查更新
Jun 08 #Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 #Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 #Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
gulp解决跨域的配置文件问题
Jun 08 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python合并同类型excel表格的方法
2018/04/01 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python