vue3.0版本中怎么使用emit向父组件传值（TS）

最新推荐文章于 2024-09-30 10:54:43 发布

JellyDDD

最新推荐文章于 2024-09-30 10:54:43 发布

阅读量1w

点赞数 1

分类专栏： Vue3.0 文章标签： vue typescript

本文链接：https://blog.csdn.net/CSND7997/article/details/112603010

版权

Vue3.0 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue3.0中使用TypeScript进行父子组件间通信的方法，包括通过props传递数据和事件触发。示例代码展示了如何在父组件中定义并传递方法到子组件，以及子组件如何接收并调用父组件的方法，同时触发父组件的回调事件。

摘要由CSDN通过智能技术生成

因为需要用到TS，所以使用了VUE3.0的版本
页面效果在这里插入图片描述

下面是新版本中父子组件传值用法

父组件中

首先：父组件引入子组件并传值，绑定方法
完整代码

<template>
  <div class="app">
    <ButtonToolbar :values="value" @toolabClick="toolabFun" :childFun="parentFun"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent, reactive, toRefs } from "vue";
import ButtonToolbar from "@/components/btnToolbar/index.vue";

export default defineComponent({
  name: "Main",
  components: {
    ButtonToolbar,
  },
  setup() {
    const data = reactive({
      value: ["新增", "编辑", "删除", "保存", "流程图"],
      // 第一种方法
      toolabFun(key: Number) {
        console.log(key);
      },
      // 第二种方法
      parentFun(key: Number) {
        console.log(key);
      },
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped></style>

子组件

接受值

  props: {
    values: {
      type: Array,
      default: () => [],
    },
    childFun: {
      type: Function,
      required: true,
    },
  },

匹配值并绑定事件并触发父事件

 setup(props, context) {
    const data = reactive({
      buttonArray: [
        { id: 1, type: "primary", name: "新增", fun: "add" },
        { id: 2, type: "primary", name: "编辑", fun: "edit" },
        { id: 3, type: "primary", name: "保存", fun: "save" },
        { id: 4, type: "danger", name: "删除", fun: "delete" },
        { id: 5, type: "primary", name: "刷新", fun: "refresh" },
        { id: 6, type: "primary", name: "流程图", fun: "chart" },
      ],
      buttonArrayTem: [{}],

      init() {
        console.log(props.values)
      },

      clickFunction(key: Number) {
        // 第一种方法
        console.log(context);
        context.emit("toolabClick", key);
        // 第二种方法
        props.toolabClick(key);
      },
    });
    onMounted(() => {
      data.init();
    });

    return {
      ...toRefs(data),
    };
  },

**第一种的方法重点就在于在setup中传的参数content，打印一下**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210114112559363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTTkQ3OTk3,size_16,color_FFFFFF,t_70)
**通过content.emit来触发父组件**