vue2自己封装一个组件

借鉴一个 demo 来实现， 传送门

特点：

• 1.0 可以使用普通组件中的方式来调用

  • 导入组件

  • 注册组件

  • 使用组件

• 2.0 直接通过 js 的方式来调用

  • this.$modal()

  • 核心代码

// 将 modal 封装为一个插件 // 导入 modal import modal from '../components/mymodal.vue' export default { install: function(Vue) { var myModal = Vue.extend(modal) // 得到以modal为模板的构造函数 Vue.prototype.modal = function() { var newModal = new myModal() // 创建一个新的modal对象 newModal.show = true var html = newModal.$mount().$el // 将对象转换为HTML对象 document.body.appendChild(html) } } }

总结：

• 并不是所有的组件都适合以这两种方式来封装：

  • 之所以这个组件可以这样子去做，原因在于这个组 件对位置没有要求

• 目的

  • 面试题：请说说你之前有没有自己封装过组件