Vue.extend 的那些事

2024-02-03 08:31:06

Vue.extend 是 Vue 的全局 API，它允许我们创建新的 Vue 组件。Vue.extend 返回一个构造函数，我们可以用它来创建组件的实例。

const MyComponent = Vue.extend({
  template: '<div>My Component</div>'
})

现在，我们可以使用 MyComponent 构造函数来创建组件的实例：

const instance = new MyComponent()

组件实例可以被挂载到 DOM 中，就像这样：

instance.$mount('#app')

Vue.extend 的第一个参数是一个对象，它指定了组件的选项。组件选项可以是任何 Vue 实例选项，例如：

data：组件的数据
template：组件的模板
methods：组件的方法
computed：组件的计算属性
watch：组件的侦听器

Vue.extend 的第二个参数是一个可选的父组件构造函数。如果指定了父组件构造函数，那么新创建的组件将继承父组件的选项。

const ParentComponent = Vue.extend({
  data() {
    return {
      message: 'Hello World'
    }
  }
})

const ChildComponent = Vue.extend({
  extends: ParentComponent,
  template: '<div>{{ message }}</div>'
})

现在，我们可以使用 ChildComponent 构造函数来创建组件的实例，并且这个实例将继承 ParentComponent 的选项：

const instance = new ChildComponent()

当我们调用 instance.$mount() 时，组件将被挂载到 DOM 中，并且它将显示 "Hello World"。

Vue.extend 是一种创建 Vue 组件的强大工具。它允许我们创建自定义组件，这些组件可以被重用并组合成更复杂的组件。

Vue.extend 和 Vue.component 的区别

Vue.extend 和 Vue.component 都可以用来创建 Vue 组件，但是它们之间有一些区别。

Vue.extend 返回一个构造函数，我们可以用它来创建组件的实例。
Vue.component 接受两个参数：一个字符串（组件的名称）和一个组件选项对象。它将在 Vue 实例中注册组件，这样我们就可以在模板中使用它。

Vue.extend 更灵活，因为它允许我们创建自定义组件，这些组件可以被重用并组合成更复杂的组件。Vue.component 更简单，因为它允许我们在 Vue 实例中注册组件，这样我们就可以在模板中使用它。

Vue.extend + $mount 在独立组件开发场景中的应用

Vue.extend + mount 这对组合在独立组件开发场景中非常有用。我们可以使用 Vue.extend 来创建组件，然后使用 mount 将组件挂载到 DOM 中。这可以使我们更容易地测试和调试组件。

例如，我们可以使用以下代码来创建和测试一个组件：

const MyComponent = Vue.extend({
  template: '<div>My Component</div>'
})

const instance = new MyComponent()
instance.$mount()

console.log(instance.$el) // <div>My Component</div>

这将创建一个名为 MyComponent 的组件，并将组件实例挂载到 DOM 中。然后，我们可以使用 console.log() 来输出组件的根元素。

Vue.extend + mount 这对组合还可以用于开发独立的组件库。我们可以使用 Vue.extend 来创建组件，然后使用 mount 将组件挂载到 DOM 中。这可以使我们更容易地演示和测试组件库。

例如，我们可以使用以下代码来创建和演示一个组件库：

const MyComponentLibrary = Vue.extend({
  components: {
    MyComponent
  }
})

const instance = new MyComponentLibrary()
instance.$mount()

console.log(instance.$el) // <div><my-component>My Component</my-component></div>