vue3+vite+ts--defineEmits的使用(子传父)

Vue中使用defineEmits进行父子组件通信

原创已于 2023-05-29 11:35:44 修改 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-05-17 10:34:10 首次发布

vue3+vite+TypeScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在Vue中，如何在不使用TypeScript和使用TypeScript泛型的情况下，通过defineEmits实现子组件向父组件发送数据并进行渲染的过程。详细阐述了子组件定义和触发事件，以及父组件接收和处理数据的方法。

一、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).父组件使用方法名接收并渲染