关于隐式建立vue实例实现简化弹出框组件显示步骤

咱们在使用vue写alert组件的时候，常常是定义了一个alert.vue，而后引入alert.vue，而后配置参数等等，很是繁琐，那有没有一种方式能够像window.alert("内容")那样简单调用呢？

答案是有的，

vue.extent会返回一个预设了部分选项的Vue实例构造器，既然是vue实例构造器 那咱们理论上是能够像new Vue({})那样去new 这个extent实例的，vue还提供了$amount,表示挂在到节点上，这样咱们理论上能够这样：

    var author = Vue.extend({
        template: "<p><a>helloe</a></p>"
      });

      function addEle(){
        new author({propsData:{author:"zhuwei"}}).$mount("#author");
      }

　　咱们经过调用addEle方法就动态在ID为author节点上渲染了一个vue（前提是html界面已经存在ID为author的节点），到如今为止好像没什么特别的，若是咱们在addEle方法里面直接建立一个ID为author的节点呢

    function addEle(){
        var authorEle = document.createElement("div");
        authorEle.setAttribute("ID","author");
        document.body.appendChild(authorEle);
        new author().$mount("#author");
      }

　　这样至少html部分咱们不须要添加这个ID为author的节点了，而后由于是弹出框组件，因此咱们须要暴露出一个属性显示用户但愿显示的信息，这里面咱们使用propsData,它能够在new vue({})的实例中指定属性值，vue本意说是为了方便测试，这里咱们拿过来用来给咱们的extent实例传递显示信息：

    function addEle(msg){
        var authorEle = document.createElement("div");
        authorEle.setAttribute("ID","author");
        document.body.appendChild(authorEle);
        new author({propsData:{author:msg}}).$mount("#author");
      }

　　这样当用户想弹出框的时候，直接点击addEle("hello world")就能够弹出信息，固然具体的弹出框组件我并无写，这里面只是说出设计思想，细节你们均可以实现