一、defineEmits不使用ts的情况
1.子组件通过defineEmits向父组件发送数据并渲染案例
父组件:
<template>
<div
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
"
>
<h1>-----------我是父组件的--------</h1>
<div>子组件发送过来的数据:{{ sonData }}</div>
<!-- 1.在子组件上定义子组件传过来的方法 -->
<son @sendFatherData="sendFatherData"></son>
</div>
</template>
<script setup>
import { ref } from 'vue';
import son from '@P/defineEmitsTest/src/componerts/son.vue';
const sonData = ref();
//2.方法接收数据渲染
const sendFatherData = val => {
sonData.value = val;
};
</script>
<style lang="scss" scoped></style>
子组件:
<template>
<div class="">
<h1>-----------子组件--------</h1>
<el-button @click="sendSon">向父组件发送数据</el-button>
</div>
</template>
<script setup>
//1.引入defineEmits
import { defineEmits } from 'vue';
//2.定义给父组件发送的方法
const emits = defineEmits(['sendFatherData']);
const sendSon = () => {
//3.发送方法,发送的数据
emits('sendFatherData', '这是子组件发送过来的数据');
};
</script>
<style lang="scss" scoped></style>
结果:
2.方法使用说明:
1).在子组件中调用defineEmits并定义要发射给父组件的方法并使用一个变量emits(变量名随意)去接收
const emits = defineEmits(['sendFatherData'])
2).子组件需要发送emits(可不用携带参数)给父组件
emits('sendFatherData', '这是子组件发送过来的数据');
3).父组件使用方法名接收并渲染
二、defineEmits使用ts泛型的情况
1.子组件通过defineEmits向父组件发送数据并渲染案例
父组件:
<template>
<div
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
"
>
<h1>-----------我是父组件的--------</h1>
<div>子组件发送过来的数据:{{ sonData }}</div>
<!-- 1.在子组件上定义子组件传过来的方法 -->
<son @sendFatherData="sendFatherData"></son>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import son from '@P/defineEmitsTest/src/componerts/son.vue';
const sonData = ref<string>();
//2.方法接收数据渲染
const sendFatherData = (val: string) => {
sonData.value = val;
};
</script>
<style lang="scss" scoped></style>
子组件:
<template>
<div class="">
<h1>-----------子组件--------</h1>
<el-button @click="sendSon">向父组件发送数据</el-button>
</div>
</template>
<script lang="ts" setup>
//1.定义给父组件发送的方法
const emits = defineEmits<{
//2.事件名字、接收值、没有返回值
(event: 'sendFatherData', val: string): void;
}>();
const sendSon = () => {
//3.发送方法,发送的数据
emits('sendFatherData', '这是子组件发送过来的数据');
};
</script>
<style lang="scss" scoped></style>
结果:
方法使用说明:
1).在子组件中调用defineEmits并定义要发射给父组件的方法需要使用ts的泛型约束并使用变量emits(变量名随意)去接收
const emits = defineEmits<{
//事件名字、接收值、没有返回值
(event: 'sendFatherData', val: string): void;
}>();
2).子组件需要发送emits(可不用携带参数)给父组件
//发送方法,发送的数据
emits('sendFatherData', '这是子组件发送过来的数据');
3).父组件使用方法名接收并渲染