Vue 3 父子组件互调方法 - setup 语法糖写法

爱被打了一巴掌 2023-09-29 09:54 106阅读 0赞

# Vue 3 父子组件互调方法 - setup 语法糖写法 #

### 文章目录 ###

*  Vue 3 父子组件互调方法 - setup 语法糖写法
 *  一、父组件调用子组件方法
 *   *  1、子组件
     *  2、父组件
     *  3、测试结果
     *  4、关于 defineExpose 的官方文档
 *  二、子组件调用父组件方法
 *   *  1、子组件
     *  2、父组件
     *  3、测试结果
     *  4、关于 defineEmits 的官方文档
     *  5、仅限类型的 emit 声明

> 下面演示均为使用 setup 语法糖的情况！

# 一、父组件调用子组件方法 #

> 下面演示为使用 setup 语法糖的情况，值得注意的是子组件需要使用 defineExpose 对外暴露方法，父组件才可以调用！

## 1、子组件 ##

<template>
    </template>
    
    <script setup lang="ts">
    // 第一步：定义子组件里面的方法
    const doSth = (str: string) => {
      console.log("子组件的 doSth 方法执行了！" + str);
    }
    // 第二步：暴露方法
    defineExpose({ doSth })
    </script>
    
    <style scoped>
    </style>

## 2、父组件 ##

<template>
      <button @click="getChild">触发子组件方法</button>
      
      <HelloWorld ref="childRef" />
    </template>
    
    <script setup lang="ts">
    // 一、导入
    import { ref } from 'vue';
    import HelloWorld from './components/HelloWorld.vue';
    
    // 二、数据
    // 第二步：定义与 ref 同名变量
    const childRef = ref<any>();
    
    // 三、函数
    const getChild = () => {
        // 第三步： 调用子组件的方法或者变量，通过value
        childRef.value.doSth("随便传值！");
    }
    </script>
    
    <style>
    </style>

## 3、测试结果 ##

![请添加图片描述][ba7ce6d1e8744485bc445e4b83137bfa.png]

## 4、关于 defineExpose 的官方文档 ##

> 网址：https://v3.cn.vuejs.org/api/sfc-script-setup.html\#defineexpose

`defineExpose`

使用 `<script setup>` 的组件是**默认关闭**的，也即通过模板 ref 或者 `$parent` 链获取到的组件的公开实例，不会暴露任何在 `<script setup>` 中声明的绑定。

为了在 `<script setup>` 组件中明确要暴露出去的属性，使用 `defineExpose` 编译器宏：

当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 `{ a: number, b: number }` (ref 会和在普通实例中一样被自动解包)。

# 二、子组件调用父组件方法 #

## 1、子组件 ##

<template>
    </template>
    
    <script setup lang="ts">
    import { onMounted } from "@vue/runtime-core";
    const emit = defineEmits([ "doSth" ]);
    const doSth = () => {
      emit('doSth');
    }
    onMounted(() => {
      doSth();
    });
    </script>
    
    <style scoped>
    </style>

## 2、父组件 ##

<template>
      
      <HelloWorld @doSth="sayHello" />
    </template>
    
    <script setup lang="ts">
    // 一、导入
    import HelloWorld from './components/HelloWorld.vue';
    
    // 二、函数
    // 第二步： 自定义方法
    const sayHello = () => {
      console.log("hello world!");
    }
    </script>
    
    <style>
    </style>

## 3、测试结果 ##

![请添加图片描述][7c9b2873187849418751cc2bcb9d9ded.png]

## 4、关于 defineEmits 的官方文档 ##

> 网址：https://v3.cn.vuejs.org/api/sfc-script-setup.html\#defineprops-和-defineemits

`defineProps` 和 `defineEmits`

在 `<script setup>` 中必须使用 `defineProps` 和 `defineEmits` API 来声明 `props` 和 `emits` ，它们具备完整的类型推断并且在 `<script setup>` 中是直接可用的：

*  `defineProps` 和 `defineEmits` 都是只在 `<script setup>` 中才能使用的**编译器宏**。他们不需要导入且会随着 `<script setup>` 处理过程一同被编译掉。
 *  `defineProps` 接收与 [`props` 选项][props_]相同的值，`defineEmits` 也接收 [`emits` 选项][emits_]相同的值。
 *  `defineProps` 和 `defineEmits` 在选项传入后，会提供恰当的类型推断。
 *  传入到 `defineProps` 和 `defineEmits` 的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它*可以*引用导入的绑定，因为它们也在模块范围内。

如果使用了 Typescript，[使用纯类型声明来声明 prop 和 emits][prop _ emits] 也是可以的。

## 5、仅限类型的 emit 声明 ##

// 类型声明
    const emit = defineEmits<{
          
      (e: 'change', id: number): void
      (e: 'update', value: string): void
    }>()
    /**
     * 注意：
     * 1、只能是要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错；
     * 2、使用类型声明的时候，静态分析会自动生成等效的运行时声明，以消除双重声明的需要并仍然确保正确的运行时行为。
     * ——来自官方文档
     */

[ba7ce6d1e8744485bc445e4b83137bfa.png]: https://img-blog.csdnimg.cn/ba7ce6d1e8744485bc445e4b83137bfa.png
[7c9b2873187849418751cc2bcb9d9ded.png]: https://img-blog.csdnimg.cn/7c9b2873187849418751cc2bcb9d9ded.png
[props_]: https://v3.cn.vuejs.org/api/options-data.html#props
[emits_]: https://v3.cn.vuejs.org/api/options-data.html#emits
[prop _ emits]: https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BB%85%E9%99%90-typescript-%E7%9A%84%E5%8A%9F%E8%83%BD