關於隱式創建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")就可以彈出信息，當然具體的彈出框組件我並沒有寫，這里面只是說出設計思想，細節大家都可以實現