Vue.extend是Vue.js提供的API之一，使用它可以方便地創建可重用組件，比如，彈窗組件。彈窗是現代Web應用程序必不可少的組件之一，它可以用來展示提示信息，頁面確認等。彈窗組件是一個相對獨立的組件，需要知道怎樣讓它與傳遞進來的數據交互。

在使用Vue.extend來創建彈窗組件時，首先要創建一個基于Vue的實例和一個包含組件模板的對象。這樣做可以讓組件可以使用Vue和自定義的模板。在基于Vue的實例的內部可以使用Vue的方法和屬性，如data，computed等，也可擴展它。

var MyAlert = Vue.extend({
template: '
\n' +
'
\n' +
'
\n' +
'
\n' +
'                    {{title}}\n' +
'
\n' +
'
\n' +
'
{{message}}
\n' +
'
\n' +
'\n' +
'
\n' +
'
\n' +
'
',
data:function(){
return {
message:'',
title:'提示'
}
},
methods:{
close:function(){
this.$destroy();
document.body.removeChild(this.$el);
}
}
});

這里，我們定義了一個名為MyAlert的Vue實例。它的template屬性是包含彈窗結構的HTML字符串。該實例的data屬性是彈窗中用到的變量，message和title。close是將彈窗銷毀的回調函數。這里的this指的是該實例本身。

當MyAlert被實例化后，就可以用來創建彈窗了。在該彈窗內傳遞一個message，然后將其$mount到dom中。

function showAlert(message, title) {
var myAlert = new MyAlert({
el: document.createElement('div')
});
myAlert.message = message;
myAlert.title = title;
document.body.appendChild(myAlert.$el);
}
showAlert('這是一個彈窗','提示');

這里定義了一個showAlert函數，它接受兩個參數，message和title。將message和title分別賦值給MyAlert的message和title變量。隨后將該實例的el屬性設置為DOM元素，并將其附加到DOM中。現在，就可以在應用程序中調用showAlert函數以顯示彈窗。

這就是使用Vue.extend創建彈窗組件的基本原理。彈窗是一個可遍歷的對象，并且可以被重用。在彈窗的實例內部，可以訪問Vue的內置屬性和擴展。