自己封装一个组件

借鉴一个 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)
  	}
  }
}

总结：

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

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

• 目的

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