vue3组合式api<script lang="ts" setup>中如何接收父组件props传值,以及子组件emit回调方法
子组件children.vue首先要引入
<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps<{
id:string,
option:any
}>()
const emit = defineEmits(["onClick", "TwoClick"])
// 点击事件1 这里触发传值我就不写了
const showAlert1 = (data)=>{
emit('onClick', { data: data})
}
// 点击事件2 这里触发传值我就不写了
const showAlert2 = (data)=>{
emit('TwoClick', { data: data})
}
</script>
父组件parent.vue要定义好相关数据,以及方法
<template>
<children id="demo1" :option="optionData" @onClick="click1" @TwoClick="click1"></children>
</template>
<script lang="ts" setup>
import children from '../../components/children' //
import { ref, } from 'vue'
const optionData = ref('我是父组件data')
const click1 = (e)=>{
console.log(e,'我是子组件showAlert1传过来的值')
}
const click2 = (e)=>{
console.log(e,'我是子组件showAlert2传过来的值')
}
</script>