vue--extends使用及理解

最新推荐文章于 2025-02-26 14:29:40 发布

闲人不梦卿

最新推荐文章于 2025-02-26 14:29:40 发布

阅读量8k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/119256774

版权

vue 专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了 Vue.js 中的 `extends` 特性，它允许组件继承另一个组件的选项。文中指出 `extends` 比 `mixins` 先执行，并且组件只能有一个 `extends` 对象。示例代码展示了 `extends` 和 `mixins` 在组件创建顺序中的应用，以及如何在组件中使用 `extends` 继承属性和方法。

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

vue–extends使用

extends和mixins类似，通过暴露一个extends对象到组件中使用。mixins功能请查看文章mixins使用及理解
extends会比mixins先执行。执行顺序：extends > mixins > 组件
extends只能暴露一个extends对象，暴露多个extends不会执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="vm">
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
</div>
<script src="vue.js"></script>
<script>
    let mixin = {
      created() {
        console.log('mixin say hi')//mixin比组件先输出
      },
      data() {
          return {
            msg: 10
          }
      },
      methods: {
        foo(){
              console.log('mixin foo()'+this.msg++)
        }
      }

    }
    let extend={
      created() {
        console.log('extend say hi')//extend比先输出mixin
      },
      data() {
          return {
            msg: 20
          }
      },
      methods: {
        foo(){
              console.log('extend foo()'+this.msg++)
        }
      }
      }

    Vue.component('component-a',{
      template:`<div><button @click="foo">componentA</button>{{msg}}</div>`,
      created() {
        console.log('componentA say hi')//后输出
      },
      methods:{
      },
      extends:extend
  })

  Vue.component('component-b',{
      template:`<div><button @click="foo">componentB</button>{{msg}}</div>`,
      methods:{
          foo(){
              console.log('componentB foo()'+this.msg++)
          }
      },
      created() {
        console.log('componentB say hi')//后输出
      },
      extends:extend
  })
  Vue.component('component-c',{
      template:`<div><button @click="foo">componentC</button>{{msg}}</div>`,
      methods:{
      },
      created() {
        console.log('componentC say hi')//后输出
      },
      mixins:[mixin],
      extends:extend
  })

    var app = new Vue({
        el:"#vm",
        data:{
        },
        methods:{
        }
    })
</script>
</body>
</html>

在这里插入图片描述