vue2 自定义动态组件所遇到的问题
这篇文章主要介绍了vue2 自定义 动态组件的实现方法,需要的朋友可以参考下
下面讲一下如何定义动态组件。
Vue.extend
思路就是拿到组件的构造函数，这样我们就可以new了。而Vue.extend可以做到：https://cn.vuejs.org/v2/api/#Vue-extend
// 创建构造器 var Profile = Vue.extend({ template: '{{firstName}} {{lastName}} aka {{alias}}
', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point')官方提供了这个示例，我们进行一下改造，做一个简单的消息提示框。
动态组件实现
创建一个vue文件。widgets/alert/src/main.vue
这是我们组件的构成。如果是第一节中，我们可以把他放到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。
可以在构造方法中传入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;然后在页面上测试一下：
主要按钮 //.. methods:{ test(){ this.$mymsg("hello vue"); } }
这样就实现了基本的传参。最好是在close方法中移除元素：
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 } })相关文章
vue加载视频流,实现直播功能的过程
这篇文章主要介绍了vue加载视频流,实现直播功能的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue2项目升级到Vue3的详细教程
看到好多开源项目都升级了vue3,下面这篇文章主要给大家介绍了关于Vue2项目升级到Vue3的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
解决v-model双向绑定失效的问题
这篇文章主要介绍了解决v-model双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue面试必备之防抖和节流的使用
在这篇文章中，大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者（watchers）以及事件处理程序，文中的示例代码简洁易懂，希望对大家有所帮助
element中async-validator异步请求验证使用
本文主要介绍了element中async-validator异步请求验证使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧