Vue的组件间传参

由于Vue的开发是基于Component,当使用vue进行开发通常会遇到以下问题:组件间的传值要按什么样的方式进行

根据类型一般有父组件向子组件传参数、子组件向父组件传参数。

注意:本博客代码使用Vue组合式开发

文章目录

      • 一、子组件向父组件传参数
      • 1.emit监听事件
      • 2.inject(可修改父组件传来的值)
      • 二、父组件向子组件传参数
      • 1.defineProps
      • 2.provide
    • 项目地址

一、子组件向父组件传参数

一般用于解决全局组件的状态改变,父组件获取某个子组件选择后的信息

实现方式包括emit、inject(注入)。

1.emit监听事件

可手动触发事件,通过组件间emit,逐级传播信息(推荐两个组件间,如果相隔太多,使用provide、inject)

这是我项目中做的,选择prompt的use it按钮后,把值传给输入框

Vue的组件间传参_第1张图片

按钮添加方法getdetails

    
Use it

使用emit发送事件需要先注册,在父组件根据相应名字获取 (父组件监听事件的命名请参考Vue.js的官方文档,有多种命名方式)

const emit = defineEmits(["response"]);

function getdetails(detail: string) {
  emit("response", detail);
  centerDialogVisible.value = false;
}

父组件设置监听,这里使用@response

    

使用prompt成功后,将值传回
在这里插入图片描述

2.inject(可修改父组件传来的值)

provide 和 inject : 一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。

Vue的组件间传参_第2张图片

App.vue里注册全局变量,使用它控制侧边栏的显示与否
Vue的组件间传参_第3张图片
点击开始游戏后,侧边栏隐藏,这里仅介绍退出后,重新显示
Vue的组件间传参_第4张图片




这里使用inject获取App.vue传来的参数,并在点击退出后,更改侧边栏显示状态

import { ref, inject, type Ref } from 'vue'
const dialogTableVisible = ref(false)
const shouldShowGlobalComponent = inject('shouldShowGlobalComponent') as Ref

function showGlobalComponent() {
  shouldShowGlobalComponent.value = true
}

二、父组件向子组件传参数

实现方式:defineProps、provide

1.defineProps

我在该组件里面添加了子组件,在点击下面的选项后,将值传给子组件,来展示数据
Vue的组件间传参_第5张图片

    ...
    
...

在子组件中直接获取,父组件传来的参数,命名需要一致


                    
                    

你可能感兴趣的:(vue.js,javascript,前端)