Vue的extend方法可以創建一個構造器，通過這個構造器我們可以創建出一個對話框組件。extend方法的使用如下：

Vue.extend(options)

在options對象中，我們可以定義對話框組件的各種屬性和行為。例如，以下是一個簡單的對話框組件的options：

var Dialog = Vue.extend({
template: '<div>{{ message }}</div>',
data: function () {
return {
message: 'Hello, world!'
}
}
})

使用該構造器創建出對話框實例：

var dialog = new Dialog()
dialog.$mount()

創建出來的dialog就是一個Vue實例，我們可以對其進行各種操作，例如：

dialog.message = 'Goodbye, world!'

這樣就可以改變對話框中的文字內容了。

對話框通常都是需要掛載到DOM中的，我們可以將其掛載到任何一個元素上：

dialog.$mount('#app')

這樣就將對話框掛載到了id為app的元素上。

在實際開發中，我們常常會定義一些默認的選項，方便對話框的統一風格和樣式。例如：

var defaults = {
title: '提示',
message: '',
cancelText: '取消',
confirmText: '確定'
}

然后定義一個create方法，用于創建對話框實例，同時可以傳入額外的配置選項：

// 用Object.assign合并選項
var create = function (options) {
var opts = Object.assign({}, defaults, options)
var Dialog = Vue.extend({
template: '<div>\
<div>{{ opts.title }}</div>\
<div>{{ opts.message }}</div>\
<button @click="cancel">{{ opts.cancelText }}</button>\
<button @click="confirm">{{ opts.confirmText }}</button>\
</div>',
data: function () {
return {
opts: opts
}
},
methods: {
cancel: opts.onCancel,
confirm: opts.onConfirm
}
})
var dialog = new Dialog()
dialog.$mount()
document.body.appendChild(dialog.$el)
return dialog
}

這樣我們就可以很方便地創建出各種樣式、文案及行為各異的對話框了：

create({
title: '提示',
message: '確定要刪除嗎？',
onCancel: function () {},
onConfirm: function () {}
})

總之，使用extend方法可以方便地創建出各種樣式、文案及行為各異的對話框，給我們的開發帶來了很大的便利。