03 Vue进阶extend使用方法详讲-CSDN博客

本文链接：https://blog.csdn.net/qq_37550440/article/details/125373592

本文详细介绍了Vue.js中`Vue.extend`和`extends`两种组件继承与扩展的方法。通过示例展示了如何创建和使用组件，分析了它们的区别。在使用继承后，data、computed属性及事件会被覆盖，mounted生命周期钩子会按顺序触发。在实际开发中，开发者需要根据需求权衡选择使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

extend主要用于高级组件开发，开发插件或this.$notiy这样的方式调用组件

有二种方式使用extend

一.extend的两种使用方式

1.方式一：extend的方式创建组件 Vue.extend(com)

<script>

    const com = {
      data: {
        text: 1
      },
      mounted() {
        console.log('com')
        console.log(this.text)

      }
    }
    // extend的使用方式1，js方式创建组件
    let comVue = Vue.extend(com)
    new comVue({ // 创建组件
      el: '#app',
      data: {
        text: 3
      },
      mounted() {
        console.log('instace')
      }
    })
  </script>

控制台输出：

2.方式一：extends的方式 extends: 'com'

<body>
  <script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <div id="app">
    <com2></com2>  // 此处使用了com2组件
  </div>

  <script>

    const com = {
      data: {
        text: 1
      },
      mounted() {
        console.log('com')
        console.log(this.text)

      }
    }
    const com2 = { // 又是一个对象
      extends: 'com',
      data: {
        text: 9
      },
      mounted() {
        console.log('com2')
      }
    }

    new Vue({
      el: '#app',
data: {
        text: 3
      },
      components: {
        com2: com2
      },
      mounted() {
        console.log('vue')
      }
    })
  </script>
</body>

控制台输出：