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

事先把要彈出的東西寫在頁面里，用 visible: false 把它隱藏起來

控制 visible 使其顯示或再次隱藏

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

用戶點擊按鈕的時候創建一個 Vue 實例

用戶點擊另一個按鈕的時候刪除這個 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}} }) 復制代碼

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

總結

以上是生活随笔為你收集整理的Vue 动态创建实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。