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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
JSON取值前判断
Dec 23 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
python将list转为matrix的方法
2018/12/12 Python
在python shell中运行python文件的实现
2019/12/21 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python中生成ndarray实例讲解
2021/02/22 Python
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
微笑服务演讲稿
2014/05/13 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
工作作风建设心得体会
2014/10/22 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
oracle重置序列从0开始递增1
2022/02/28 Oracle