浅谈Vue 函数式组件的使用技巧

下面我们就来详细讲解一下“浅谈Vue 函数式组件的使用技巧”的完整攻略。

什么是Vue函数式组件

在Vue中，组件代表着一个独立的模块，它可以被包含在页面中的任何地方，并可以重复使用。Vue中的组件有两种类型：状态组件和函数式组件。函数式组件是一种无状态组件，它不会保留状态，只会根据传入的props渲染其内容，通常用于列表、表格等无需维护复杂状态的组件中。在Vue2.x之前，函数式组件的主要用途是优化性能，但在Vue2.x之后，函数式组件还可以用于提高代码的可读性和可复用性。

Vue函数式组件的使用

Vue函数式组件的定义和普通组件一样，只是需要在定义组件时添加functional:true选项：

<template functional>
  //组件内容
</template>

<script>
export default {
 functional: true,
 //其它选项
}
</script>

<style>
/*组件样式*/
</style>

在函数式组件中，我们无法使用this关键字来操作组件实例，也无法使用生命周期钩子函数来处理组件状态。而是通过props来接收数据，通过context来调用父组件的方法。

接下来，我们通过两个示例来说明Vue函数式组件的使用技巧。

示例一：函数式组件的复用

下面是一个计数器的普通组件实现：

<template>
  <div>
    <div>{{count}}</div>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

通过函数式组件实现，可以把计数器的逻辑独立出来，使其更加可复用：

<template functional>
  <div>
    <div>{{props.count}}</div>
    <button @click="props.increment">+1</button>
  </div>
</template>

<script>
export default {
  functional: true,
  props: {
    count: {
      type: Number,
      required: true,
    },
    increment: {
      type: Function,
      required: true,
    },
  },
};
</script>

我们可以通过在父组件中传入参数来使用该组件：

<template>
  <div>
    <Counter :count="count" :increment="increment" />
  </div>
</template>

<script>
import Counter from "@/components/Counter.vue";

export default {
  components: {
    Counter,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

示例二：函数式组件的列表渲染

下面是一个普通组件实现的列表渲染：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{item}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["A", "B", "C"],
    };
  },
};
</script>

通过函数式组件实现，可以把列表项的渲染逻辑独立出来，使其更加可复用：

<template functional>
  <div v-for="(item, index) in props.list" :key="index">{{props.itemRender(item)}}</div>
</template>

<script>
export default {
  functional: true,
  props: {
    list: {
      type: Array,
      required: true,
    },
    itemRender: {
      type: Function,
      required: true,
    },
  },
};
</script>

我们可以通过在父组件中传入参数来使用该组件：

<template>
  <div>
    <List :list="list" :itemRender="itemRender" />
  </div>
</template>

<script>
import List from "@/components/List.vue";

export default {
  components: {
    List,
  },
  data() {
    return {
      list: ["A", "B", "C"],
    };
  },
  methods: {
    itemRender(item) {
      return `item: ${item}`;
    },
  },
};
</script>

通过上述两个示例的演示，我们可以看到函数式组件具有很高的可复用性，可以把组件的逻辑和渲染结果独立出来，更加灵活地组合使用。