Vue extends 属性的用法示例详解

Vue框架中有一个非常强大的属性extends，它可以用于扩展组件的功能。本文将详细讲解extends属性的用法，并且提供两个示例说明。

什么是 Vue extends 属性

在Vue组件中，可以使用extends属性对另一个组件进行扩展，从而实现代码的复用。使用extends属性，可以继承父组件的模板、计算属性、方法、自定义事件等等，以及添加新的属性和方法。

以下是一个示例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello, world!'
      }
    },
    methods: {
      sayHi() {
        console.log('Hi')
      }
    }
  }
</script>

这是一个简单的Vue组件，它包含一个模板和一个data属性，以及一个方法sayHi。

如果需要扩展这个组件的功能，可以使用extends属性。例如：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="sayHi">Say Hi</button>
  </div>
</template>

<script>
  import BaseComponent from './BaseComponent.vue'

  export default {
    extends: BaseComponent,
    data() {
      return {
        message: 'Hello, Vue!'
      }
    }
  }
</script>

在这个示例中，我们创建了一个新的组件，并使用extends属性继承了原来的组件BaseComponent。新组件的模板中添加了一个button按钮，当按钮被点击时，调用继承的方法sayHi。

注意：在使用extends属性时，需要将继承的组件import进来，如上例中的import BaseComponent from './BaseComponent.vue'。

示例一：使用 extends 继承输入框的默认属性

以下是第一个示例：扩展一个输入框组件，并在这个组件的基础上，设置默认的placeholder属性和maxlength属性。

<template>
  <div>
    <input v-bind="$attrs" v-on="$listeners" placeholder="Enter your text here" :maxlength="50">
  </div>
</template>

<script>
  export default {
    inheritAttrs: false
  }
</script>

其中，$attrs代表父组件传递过来的所有属性，$listeners代表父组件传递过来的所有事件监听器。设置inheritAttrs: false是为了防止把所有属性和事件监听器传递给input元素。

在父组件中，我们可以使用这个扩展后的输入框组件，并传递给它一些属性：

<template>
  <div>
    <extended-input v-model="text" placeholder="Type here..." />
  </div>
</template>

<script>
  import ExtendedInput from './ExtendedInput.vue'

  export default {
    components: {
      'extended-input': ExtendedInput
    },
    data() {
      return {
        text: ''
      }
    }
  }
</script>

在上面的示例中，我们将扩展后的输入框组件命名为extended-input，并传递一个placeholder属性给它。因为我们设置了默认的placeholder属性和maxlength属性，所以可以省略这两个属性。

示例二：使用 extends 继承图表组件的默认属性和方法

以下是第二个示例：使用extends扩展一个图表组件，并在这个组件的基础上，添加一个新的属性maxValue和一个新的方法drawLine。

<template>
  <div>
    <canvas :width="width" :height="height"></canvas>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        width: 400,
        height: 300
      }
    },
    methods: {
      drawCircle() {
        // Draw a circle
      }
    }
  }
</script>

这是一个简单的图表组件，它使用canvas元素绘制图表。

现在，我们将扩展这个组件，并添加新的属性和方法：

<template>
  <div>
    <canvas :width="width" :height="height"></canvas>
  </div>
</template>

<script>
  import ChartComponent from './ChartComponent.vue'

  export default {
    extends: ChartComponent,
    data() {
      return {
        maxValue: 100
      }
    },
    methods: {
      drawLine() {
        // Draw a line
      }
    }
  }
</script>

在上面的示例中，我们添加了一个新的属性maxValue和一个新的方法drawLine。在调用drawLine方法时，可以使用继承的方法drawCircle。

在父组件中，我们可以使用扩展后的图表组件，并使用新的属性和方法：

<template>
  <div>
    <extended-chart :max-value="200" />
  </div>
</template>

<script>
  import ExtendedChart from './ExtendedChart.vue'

  export default {
    components: {
      'extended-chart': ExtendedChart
    }
  }
</script>

在上面的示例中，我们将扩展后的图表组件命名为extended-chart，并传递一个max-value属性给它。因为我们使用了继承属性，所以可以使用父组件没有添加的新的属性和方法。