vue2和vue3的组件封装还是有区别。

父组件
和vue2基本相同

<!-- :onClick通过props传入回调不传参有默认参数e，@handleClick通过emit传递没有默认参数 -->
<components-test
  @handleClick="testFn"
  :onClick="testFn"
  :name="refTest"
/>

<script lang="ts">
import componentsTest from "../../components/components-test.vue";
import { ref, defineComponent } from "vue";
defineComponent({
  name: "vue3Test",
  components: {
    componentsTest,
  },
  setup: () => {
    let refTest = ref(111); // 单个值用ref
    let testFn = (e?: any) => {
      // setup中的方法需要暴露才能在模板中使用
      console.log("testFn", e);
      refTest.value = 22222;
    };
    return { refTest, testFn }; // 暴露出来的才能用到templete模板
  },
});
</script>

子组件

主要的几个点：
1.传入的props如果是响应式参数需要通过torefs转化。
2.在setup中要触发父组件传入的方法需要通过setup的第二个参数context.emit。context还有其他的方法后面会继续探索。

<template>
  <div class="components_test">
    <div @click="handleClick">components_test{{ name }}</div>
    <div @click="onClick(45645645645)">props</div>
  </div>
</template>

<script lang="ts">
import { constants } from "fs";
import { ref, reactive, defineComponent, toRefs, toRef } from "vue";
export default defineComponent({
  props: {
    name: {
      type: String,
      default: "我的",
    },
    onClick: {
      type: Function,
      default: () => {},
    },
  },
  emits: ["handleClick"],
  setup(props, context) {
    // 其中props是响应式不能随便使用es6解构，context不是响应式可以使用es6解构
    let { name } = toRefs(props); // 将props转化为响应式，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
    // let name = toRef(props, 'name'); // 针对单个相应式数据
    let handleClick = () => {
      console.log(props, context);
      context.emit("handleClick", 324343);
      // context.attrs
      // context.slots
      // context.expose
    };
    return {
      handleClick,
      name,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>