Vue - Vue3 封装组件(更新中...)

在Vue3中，我们可以通过创建组合式API（Composition API）的方式来封装组件。以下是一个简单的示例，展示了如何封装一个可复用的计数器组件。

<template>
  <div>
    <button @click="increment">+</button>
    <p>{{ count }}</p>
    <button @click="decrement">-</button>
  </div>
</template>
 
<script>
import { ref, defineComponent } from 'vue';
 
export default defineComponent({
  name: 'CounterComponent',
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    function decrement() {
      count.value--;
    }
 
    return {
      count,
      increment,
      decrement
    };
  }
});
</script>

在这个组件中，我们使用了Vue3的ref函数来创建一个响应式的计数器，并且使用setup函数来返回我们需要在模板中使用的方法和响应式数据。这样的封装方式使得我们可以在多个地方复用这个计数器逻辑，而不需要重复编写相同的代码。