如果随着自定义动态组件的增加，在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源码的学习。
以上所述是小编给大家介绍的vue2 自定义动态组件所遇到的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: