vue3-父子组件通信

小沐°2026-01-01 11:03

父组件：

复制代码

const couponListData = ref'内容')

<couponList
    :couponListData="couponListData"
</couponList>

子组件：

复制代码

console.log(props.couponListData)

let props = defineProps({
  couponListData: String
})

如果传递的是个变量，那么需要给子组件加上v-if，否则会报错

复制代码

<couponList
    :couponListData="couponListData"
    v-if="couponListData">
</couponList>

父组件：

复制代码

const dialog = ref()
dialog.value.open()

<couponList ref="dialog"></couponList>

子组件：

复制代码

const open = () => {
  //方法
}

defineExpose({
  open,
  //一些变量，需要父组件传递过来赋值的
})

子组件：

复制代码

const emit = defineEmits(['sendData'])

emit('sendData', couponCheckList.value)

父组件：

复制代码

const handleCoupon = (value) => {
  coupon.value = value
}

<couponList @sendData="handleCoupon"></couponList>