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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
js用图作提交按钮或超连接
Mar 26 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 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
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
python中的句柄操作的方法示例
2019/06/20 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
新三好学生主要事迹
2014/01/23 职场文书
树转促学习心得体会
2014/09/10 职场文书
出售房屋协议书范本
2014/10/06 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
队列队形口号
2015/12/25 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL