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>








posted @ 2022-12-09 14:56  web求知者  阅读(642)  评论(0)    收藏  举报