vue2和vue3中的父子组件传参

vue2 

子组件

 <el-pagination
        layout="prev, pager, next,total"
        :total="total"
        :page-size="pageSize"
        @current-change="pageChange"
      >
      </el-pagination>


export default {
  props: ["total", "pageSize"],
  data() {
    return {};
  },
methods: {  
    pageChange(page) {
      this.$emit("pageChange", page);
    },
  },
};
</script>

父组件

<Page :total="total" :pageSize="pageSize" @pageChange="pageChange"></Page>

<script>
import Page from "@/components/page.vue";
export default {
  components: { Page },
  name: "singer",
  data() {
    return {
      singerList: "",
      limit: 30,
      offset: 0,
      pageSize: 1, //表格展示部分   每页展示多少条数据
      total: 0, //表格展示部分  总共多少条数据
    };
  },
  
  methods: {
   
      pageChange(page) {
      this.offset = (page - 1) * this.limit;
   
    },
  
  },
};
</script>

vue3

子组件

<template>
  <div>
    <h2>name:{{ name }}</h2>
    <p>age:{{ age }}</p>
    <p><button @click="addAge">+</button></p>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  props: {
    name: String, //限制数据类型
    age: Number,
    person: Object,
  },
  emit: ["custom-event"],

  setup(props, { emit }) {
    console.log(props.name);
    console.log(props.ages);
    console.log("{ emit }", { emit });
    const person = reactive({});

    const addAge = () => {
      emit("custom-event", props.age);
    };

    return { ...toRefs(person), addAge };
  },
};
</script>

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

父组件

<template>
  <div class="home">
    <HelloWorld :msg="tomsg" />
    <hr />
    <HelloWorld :msg="newmsg" />
    <hr />
    <New :name="name1" :age="age" @custom-event='handel'></New>
      <hr />
    <New :name="name" :age="age1" @custom-event='handel2'></New>
  </div>
</template>

<script lang="ts" >
import { defineComponent, reactive, toRefs, ref } from "vue";
import HelloWorld from "../components/HelloWorld.vue";
import New from "../components/new.vue";

export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld,
    New,
  },
  setup() {
    const data = reactive({
      tomsg: "Welcome to Your Vue.js + TypeScript App",
      newmsg: "hello word",
      name: "wqq",
      name1:'vue',
      age: 12,
      age1:18,
    });
    const message = ref(null);
    const handel = (val:any) => {
      console.log(val)
      val=data.age++
      
       console.log(val)
    };
     const handel2 = (val:any) => {
      console.log(val)
     
      val=data.age1++
       console.log(val)
    };

    console.log("message", message);

    return { ...toRefs(data), message,handel,handel2 };
  },
});
</script>