Vue extend学习示例讲解

关于Vue的extend方法，它可以让我们扩展一个Vue组件，方便我们在开发中复用组件，并且可以轻松自定义组件的一些属性和方法。

下面我将详细讲解Vue extend的使用方法，以及一些代码示例。

Vue.extend方法详解

在Vue的官方文档中，Vue.extend是这么定义的：

Vue.extend(options)

options参数说明：

• "data"选项是一个对象或一个函数。如果是一个对象，在模板中该对象会被vue实例的$data属性代理。如果是函数，则Vue会为每个实例返回一个独立的data对象。这是因为Vue实际上将组件中的data属性复制一份，来避免不同组件之间的数据污染。

- "template"选项是一个字符串模板，或者一个template元素

• "props"选项用于声明组件props。props可以是一个数组或一个对象。这些props属性将会被传递给子组件。

- "methods"选项定义了Vue实例的方法。

- "computed"选项定义了Vue实例的计算属性。计算属性的结果会缓存，只有在依赖值改变时才重新计算。

- "watch"选项用于观察Vue实例上的一个表达式或一个函数，当表达式的值改变时执行回调。

示例1：使用Vue.extend实现可复用的弹窗组件

现在有一个需求是：在页面内的多个地方都需要弹出一个提示框，传入不同的提示内容和回调函数。此时，我们可以通过使用Vue.extend来实现这个可复用的弹窗组件。

const Dialog = Vue.extend({
  template: `
    <div>
      <div>{{ title }}</div>
      <div>{{ content }}</div>
      <button @click="onOk">OK</button>
      <button @click="onCancel">Cancel</button>
    </div>
  `,
  props: {
    title: String,
    content: String,
    onOk: Function,
    onCancel: Function
  }
})

上述代码中，我们定义了一个Dialog组件，它有两个props：title和content，以及两个方法，onOk和onCancel。

通过使用Vue.extend方法，我们将这个组件扩展到全局，可以在需要使用时直接进行初始化：

const dialog = new Dialog({
  el: document.createElement('div'),
  propsData: {
    title: '提示',
    content: '确定要删除吗？'
  },
  methods: {
    onOk() {
      console.log('确定')
    },
    onCancel() {
      console.log('取消')
    }
  }
})

document.body.appendChild(dialog.$el)

示例2：使用Vue.extend实现可复用的列表组件

接下来是一个示例2，我们可以使用Vue.extend来简化一个可复用的列表组件的开发过程。

const ListItem = Vue.extend({
  template: `
    <div>
      <h4>{{item.title}}</h4>
      <p>{{item.description}}</p>
    </div>
  `,
  props: ['item']
})

const List = Vue.extend({
  template: `
    <div>
      <list-item v-for="(item, index) in items" v-bind:item="item" :key="index"/>
    </div>
  `,
  props: ['items'],
  components: {
    ListItem
  }
})

上面的代码中，我们定义了两个组件：ListItem和List。ListItem是每一个列表项，List是列表整体。

通过使用Vue.extend方法，我们可以把这两个组件扩展到全局，然后可以在其他地方使用：

const items = [
  { title: 'Vue.js入门与实践', description: '深入浅出地讲解了Vue.js的基础知识和实践经验。'},
  { title: '深入浅出React和Redux', description: '系统地讲解React和Redux最佳实践，适合React和Redux的入门者。'},
  { title: 'Node.js实战', description: '从入门到实战，全面透彻地掌握Node.js的开发和部署，是Node.js的入门必备参考。'},
]

new List({
  el: '#app',
  propsData: {
    items
  }
})

以上就是两个使用Vue.extend的示例，希望这些示例可以帮助大家更好地理解Vue的extends方法。