vue3-父子组件通信

父组件向子组件传递信息

父组件：

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>

传递多个参数