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

前端之家收集整理的这篇文章主要介绍了vue2 自定义动态组件所遇到的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

Vue.extend

思路就是拿到组件的构造函数,这样我们就可以new了。而Vue.extend可以做到:

{{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

而MyMsgConstructor如下。

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

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

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

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

调用

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

然后在页面上测试一下:

主要按钮 //..  methods:{ test(){ this.$mymsg("hello vue"); } }

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

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

回调处理

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

{ this.visible = false; this.$el.parentNode.removeChild(this.$el); if (typeof this.onClose === 'function') { this.onClose(this); } },mounted() { this.close(); } }

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

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

{ console.log("closed..") }); },

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

统一管理

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

{ 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中加入下面的代码即可。

...
Vue.use(Widgets)

这样就很简洁了。

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

widgets部分源码:

以上所述是小编给大家介绍的vue2 自定义动态组件所遇到的问题。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/38775.html

猜你在找的Vue相关文章