關於隱式建立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")就能夠彈出信息，固然具體的彈出框組件我並無寫，這裏面只是說出設計思想，細節你們均可以實現