Vue.js 使用当前 Vue 组件的方法作为默认 prop 值

在本文中，我们将介绍如何在 Vue.js 中使用当前组件的方法作为默认 prop 值，并提供示例说明。

什么是默认 prop 值？

在 Vue.js 中，可以使用组件的 props 属性来传递数据给子组件。而默认 prop 值指的是当父组件没有传递相关数据时，子组件将使用的默认值。

使用当前组件的方法作为默认 prop 值

我们可以通过在组件的默认 prop 值中使用函数来实现使用当前组件的方法作为默认 prop 值的功能。下面是一个示例：

Vue.component('child-component', {
  props: {
    defaultValue: {
      type: Function,
      default: function() {
        return this.currentMethod;
      }
    }
  },
  data() {
    return {
      currentMethod: 'defaultMethod'
    };
  },
  methods: {
    defaultMethod() {
      console.log('This is the default method');
    },
    customMethod() {
      console.log('This is a custom method');
    }
  },
  mounted() {
    this.defaultValue(); // 调用默认 prop 值中的方法
  },
  template: `<div>
    <button @click="customMethod">Click me</button>
  </div>`
});

在上面的示例中，我们定义了一个名为 child-component 的子组件。该组件的属性 defaultValue 的类型是函数，并设置默认值为当前组件的 currentMethod 方法。

在组件的 data 中，我们定义了 currentMethod 属性，并将其初始值设为 'defaultMethod'。同时，我们还定义了 defaultMethod 和 customMethod 两个方法。

在 mounted 钩子中，我们调用了默认 prop 值中的方法 defaultValue()，这样在子组件挂载后会执行该方法。

父组件使用该子组件时，可以选择传递 defaultValue 属性的值，或者不传递任何值。如果不传递值，子组件将使用默认的 defaultValue 方法，即 currentMethod 方法。

这样，当点击子组件中的按钮时，会执行 customMethod 方法。如果没有传递 defaultValue 值，则会执行默认的 currentMethod 方法。

示例说明

为了更好地理解如何使用当前组件的方法作为默认 prop 值，我们通过一个实际的案例进行示例说明。

假设我们有一个名为 Order 的父组件和一个名为 Product 的子组件。Order 组件用于展示订单信息，而 Product 组件则用于展示产品信息。

在 Product 组件中，我们约定了一个默认的排序方法为 defaultSort，该方法用于对产品列表进行排序。当父组件没有显式指定排序方法时，将使用该默认方法。

Vue.component('order', {
  template: `<div>
    <h2>订单详情</h2>
    <product :products="products" :sortMethod="sortByPrice"></product>
  </div>`,
  data() {
    return {
      products: [
        { name: '商品1', price: 100 },
        { name: '商品2', price: 50 },
        { name: '商品3', price: 200 }
      ]
    };
  },
  methods: {
    sortByPrice(a, b) {
      return a.price - b.price;
    }
  }
});

Vue.component('product', {
  props: {
    products: {
      type: Array,
      required: true
    },
    sortMethod: {
      type: Function,
      default: function() {
        return this.defaultSort;
      }
    }
  },
  methods: {
    defaultSort(a, b) {
      return a.name.localeCompare(b.name);
    }
  },
  computed: {
    sortedProducts() {
      return this.products.sort(this.sortMethod);
    }
  },
  template: `<div>
    <h3>产品列表</h3>
    <ul>
      <li v-for="product in sortedProducts" :key="product.name">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>`
});

new Vue({
  el: '#app'
});