Vue extend的基本用法(实例详解)

Vue.extend的基本用法

介绍

Vue.extend是Vue.js提供的扩展一个构造函数的功能。扩展一个构造函数，可以使用基础 Vue 构造器，创建一个“子类”，允许在它基础上拓展一些功能。Vue.extend返回的是一个新的构造器，我们可以基于这个构造器创建出新的Vue实例。

语法

Vue.extend(options)

• options：选项对象，提供组件所需的各种配置选项。

实例

示例一

// 父组件组件
Vue.component("my-component", {
  template: `
    <div>
      <h2>{{title}}</h2>
      <p>{{content}}</p>
    </div>
  `,
  props: {
    title: String, // 标题
    content: String, // 内容
  },
});

// 子组件创建
const SubMyComponent = Vue.extend({
  template: `
    <div>
      <h2>我是来自于 {{name}} 的标题</h2>
      <p>{{msg}}</p>
    </div>
  `,
  props: {
    name: String,
  },
  data() {
    return {
      msg: "我是来自于Vue.extend创建的子组件",
    };
  },
});

// 创建子组件实例
new SubMyComponent({
  el: "#app",
  propsData: {
    name: "sub-component",
  },
});

上述代码中，我们首先定义了一个普通的父组件。在子组件中使用Vue.extend方法创建一个新的构建器，并定义组件所需的各种配置选项，该渲染函数会在实例化时自动调用。然后我们通过新的构造函数创建了一个子组件实例，并将其挂载到当前页面上的一个元素上。

示例二

// 定义组件
const component = Vue.extend({
  template: `
    <div>
      <h1>{{title}}</h1>
      <div>{{content}}</div>
    </div>
  `,
  props: {
    title: { type: String },
    content: { type: String },
  },
});

// 创建组件实例
const vm = new component({
  el: "#app",
  propsData: {
    title: "Vue.extend",
    content: "我是通过Vue.extend创建的组件",
  },
});

// 修改属性(重写)
vm.title = "重写过的标题";

上述代码中，我们首先定义了一个组件构造函数component。然后我们通过Vue.extend方法基于component构建器创建了一个新的构造函数。接下来我们使用新的构造函数创建了一个vm实例，并将其挂载到当前页面的元素上。最后，我们使用vm实例中的属性重写标题。