Vue3父子组件数据传递

getCurrentInstance方法

Vue2中,可以通过this来获取当前组件实例;

Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。

在Vue3中,getCurrentInstance()可以用来获取当前组件实例。

let { proxy } = getCurrentInstance();

在setup中分别打印下面3个值,结果如下:

console.log(getCurrentInstance,typeof(getCurrentInstance));
console.log(getCurrentInstance(),typeof(getCurrentInstance()));
console.log(proxy,typeof(proxy));

可以看到,getCurrentInstance是一个function方法,getCurrentInstance()是一个对象,proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性,通过对象的解构赋值方式拿到proxy。

getCurrentInstance只能在setup或生命周期钩子中使用

用于线上环境使用方法:

方法1:

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)

方法2:

const { proxy } = getCurrentInstance()  

$emit使用方法

许多Vue模式涉及使用props将数据从父组件传递到子组件。但如果我们需要一个子组件将数据传给它的父组件呢?

使用 emit,我们可以触发事件并将数据传递到组件的层次结构中。这对下面几种情况很有用,如:

  • 从 input 中发出数据
  • 从 modal 本身内部关闭 modal
  • 父组件响应子组件

Vue Emit是如何工作的?

当我们 emit 一个事件时,我们用一个或多个参数调用一个方法:

  • eventName: string - 事件的名称
  • values: any - 通过事件传递的参数

下面是一个内联 emit的例子,<button @click="$emit('add', Math.random())">。emit一个名为add的事件,并将Math.random()的值作为参数传递出去。

然后,在父组件使用v-on或@指令可以监听我们的自定义添加事件并接收该参数值。

Child.vue

<template>
  <button @click="$emit('add', Math.random())">
    Add Math.random()
  </button>
</template>

Parent.vue中监听:

<script setup>
import { ref } from 'vue'
const count = ref(0)
// 也可以从我们的模板中调用一个函数 `<ChildComponent @add="add" />
// const add = (i) => count.value += i
</script>
<template>
  <ChildComponent @add="(i) => count += i" /> 
  <p>Count: {{ count }}</p>
</template>

每次我们点击按钮,Child.vue 都会 emit 一个 add 事件,并带有一个0到1之间的随机值。 然后,Parent.vue 捕捉到这个事件,并将这个值添加到计数中。

可以传递任意多的参数,监听器也会收到所有的参数:

  • Child - $emit('add', Math.random(), 44, 50)
  • Parent - @add="(i, j, k) => count += i + j + k"

现在,我们知道如何在我们的模板中 emit 内联事件,但在更复杂的例子中,如果我们从SFC的script 中 emit 一个事件会更好。特别是当我们想在 emit 事件之前执行一些逻辑时,这很有用。

在Vue 3中,我们有2种不同的方法来做到这一点:

  • 选项API - this.$emit
  • 带有setup()的组合API - context.emit
  • 带有
相关推荐
温轻舟几秒前
前端开发 -- 自定义鼠标指针样式
开发语言·前端·javascript·css·html·温轻舟
天天打码20 分钟前
ThinkPHP项目如何关闭runtime下Log日志文件记录
android·java·javascript
冰镇屎壳郎32 分钟前
前端安全 常见的攻击类型及防御措施
前端·安全·前端安全
2401_8576176238 分钟前
“无缝购物体验”:跨平台网上购物商城的设计与实现
java·开发语言·前端·安全·架构·php
2401_857439691 小时前
智慧社区电商系统:提升用户体验的界面设计
前端·javascript·php·ux
我是高手高手高高手1 小时前
ThinkPHP8多应用配置及不同域名访问不同应用的配置
linux·服务器·前端·php
小李小李不讲道理1 小时前
行动+思考 | 2024年度总结
前端·程序员·年终总结
uhakadotcom1 小时前
代码人生-精选文章周刊
前端·后端·github
苹果酱05671 小时前
Golang的文件解压技术研究与应用案例
java·vue.js·spring boot·mysql·课程设计
csdnLN1 小时前
$.ajax() 对应事件done() 、fail()、always() 的用法
前端·javascript·ajax