vue3中子向父父向子传参数_defineprops 子传父-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45600052/article/details/131223082

本文介绍了在Vue中，父组件如何通过自定义属性将数据传递给子组件，子组件则利用defineProps来接收这些属性。同时，子组件可以通过defineEmits触发自定义事件，向父组件传递数据，父组件通过事件监听器来接收并处理这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父向子传参（父组件在子组件身上自定义属性，子组件使用defineprops接收）

//父组件 background、small、disabled、total 均为自定义属性
 <Pagination 
   :background="true" 
   :small="true" 
   :disabled="false" 
   :total="total" />


//子组件
import { defineProps } from 'vue' // 引入defineProps

// 定义接收数据的类型type、是否必填required 还有个如果不填默认传值的字段default 这三个字段需要哪个写哪个
defineProps({
    total: {
      type: Number,
      required: true
    },
    background: {
      type: Boolean,
      required: true
    },
    disabled: {
      type: Boolean,
      required: true
    },
    small: {
      type: Boolean,
      required: true
    }
  })

//在template中使用
 <el-pagination
  :small="small"
  :disabled="disabled"
  :background="background"
  :total="total" />

子向父传参 (子组件通过defineEmits传递父组件使用自定义事件接收)

//父组件的书写方式 @后面的getSizeVal和getCurVal是自定义事件  等于号后面的getSizeVal，getCurVal 是需要在父组件中接收传递过来参数的方法
<Pagination  @getSizeVal="getSizeVal" @getCurVal="getCurVal"/>

 const getSizeVal = (sizeVal: number) => {
    //sizeVal 就是子组件传递过来的数据
    limit.value = sizeVal
  }

  const getCurVal = (curVal: number) => {
    //curVal 就是子组件传递过来的数据
    page.value = curVal
  }


//子组件的书写方式
import { defineEmits } from 'vue' //引入defineEmits

//将自定义事件传递给父组件getSizeVal、getCurVal
const emit = defineEmits(['getSizeVal', 'getCurVal'])


const handleSizeChange = (val: number) => {
    //触发自定义事件 第一个参数是触发的哪个自定义事件  第二个参数是传递的值
    emit('getSizeVal', val)
  }

const handleCurrentChange = (val: number) => {
    //触发自定义事件
    emit('getCurVal', val)
  }


<el-pagination 
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange" />