Vue 動態創建實例

來自專欄前端學習指南JS Bin?

jsbin.com

在 Vue 裡面，如果你想在頁面里彈出一個東西，通常的辦法是：

1. 事先把要彈出的東西寫在頁面里，用 visible: false 把它隱藏起來
2. 控制 visible 使其顯示或再次隱藏

另外一種就是上面代碼所示那樣

1. 用戶點擊按鈕的時候創建一個 Vue 實例
2. 用戶點擊另一個按鈕的時候刪除這個 Vue 實例

Element UI 的 $message 就是這樣實現的，這種方法尤其適合通知類的場景，代碼如下。

var MyComponent = Vue.extend({ props: [prop1], template: ` <div> <p>data: {{message}}</p> <p>props: {{prop1}}</p> <p><button @click="$emit(hi)">emit</button></p> </div> `, data() { return { message: my component } }})var app = new Vue({ el: #app, mounted(){ var c = this.c = new MyComponent({ propsData: { prop1: prop1 } }).$mount() this.$refs.here.appendChild(c.$el) c.$on(hi, ()=>{ console.log(hi from myComponent) }) }, methods:{ remove(){ this.c.$el.remove() this.c.$destroy() this.c = null } }})

如果你還有其他辦法，可以留言。

推薦閱讀：