父子组件传值vue3

1.父子组件传值

1.定义子组件

2.引入子组件后在父组件中使用子组件

import AllcationBeds from "../component/AllocationBeds/index";

    <AllcationBeds

      :infoRow="newObj"

      @parentChange="parentChange"

      ref="subForm1"

    ></AllcationBeds>

  ：infoRow="newObj"（这是父组件向子组件传的值）

3.子组件接收：

const props = defineProps({

  infoRow: {

    type: Object,

    default: () => {},

  },

});

默认有ts限制

子组件接收并使用：

用props.infoRow打点使用接收到的值。

2.父组件使用子组件的方法

1.在子组件中定义方法

const submitForm=()=>{}

2.使用defineExpose

defineExpose({

  submitForm,

});

3.在父组件中使用ref

 const subForm1 = ref();

4.调用子组件的方法

 subForm1.value.submitForm();

（首先可以打印 subForm1.value绑定的值内有我们封装的函数，直接调用）

3. 子组件调用父组件中的事件

1.在父组件中定义好方法

const CloseDrawer = () => {

  父组件中的方法

};

用  @CloseDrawerFunction="CloseDrawer"传给子组件

2.在子组件中获取父组件的方法

const emit = defineEmits(["CloseDrawerFunction"]);

3.调用

emit("CloseDrawerFunction");

4.子组件给父组件传值

子组件给父组件传值

 父组件中

得到的值就是子组件给父组件传的值

5.在项目过程中使用到分页

    <pagination

      v-show="total > 0"

      :total="total"

      v-model:page="queryParams.pageNum"

      v-model:limit="queryParams.pageSize"

      @pagination="getList"

    />

getList（）是获取数据，点击再次调接口获取数据