03 Vue进阶extend使用方法详讲

最新推荐文章于 2024-06-21 13:24:53 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-06-21 13:24:53 发布

阅读量3.9k

点赞数 1

分类专栏： # Vue进阶文章标签：前端 extend Vue

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

版权

Vue进阶专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

控制台输出：

区别：

Vue.extend的方式不用调用即可使用，extends的方式需要调用才能使用，我们开发组件的时候就需要衡量

结论：

使用继承后data,computed，事件都被会覆盖, mounted 都会被触发（先触发被继承的,再触发继承后的），prop 需要通过propsData传值

流氓也是种气质 _Cookie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
03 Vue进阶extend使用方法详讲

extend主要用于高级组件开发语法如Vue.extend(com) 控制台输出：控制台输出： Vue.extend的方式不用调用即可使用，extends的方式需要调用才能使用，我们开发组件的时候就需要衡量使用继承后data,computed，事件都被会覆盖, mounted 都会被触发（先触发被继承的,再触发继承后的），prop 需要通过propsData传值......
复制链接

扫一扫