Vue的组件间传参

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

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

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

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

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

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

1.emit监听事件

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

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

library

按钮添加方法getdetails

    <div style="display:flex;justify-content:flex-end;align-items:flex-end;">
        <el-button @click="getdetails(index.prompts)">Use it</el-button>          
    <div>

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

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

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

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

    <div class="flex flex-1">
              <PromptLibrary @response="(msg: string) => textarea += msg" />
    </div>

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

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

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

Alt

App.vue里注册全局变量,使用它控制侧边栏的显示与否
侧边栏
点击开始游戏后,侧边栏隐藏,这里仅介绍退出后,重新显示
游戏

<template>
  <div class="flex flex-row h-screen">
    <SideBar v-if="shouldShowGlobalComponent" />
    <RouterView class="w-full p-4 py-8" />
  </div>
</template>

<script setup lang="ts">
import { RouterView } from "vue-router";
import SideBar from "@/components/SideBar.vue"
import { provide, ref } from "vue";
const shouldShowGlobalComponent = ref(true);
provide('shouldShowGlobalComponent', shouldShowGlobalComponent)
</script>

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

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

function showGlobalComponent() {
  shouldShowGlobalComponent.value = true
}

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

实现方式:defineProps、provide

1.defineProps

我在该组件里面添加了子组件,在点击下面的选项后,将值传给子组件,来展示数据
在这里插入图片描述

    ...
    <Details :jsondataicon="jsondata.icon" :jsondataprompts="jsondata.prompts"
    :jsondatabackground="jsondata.background" :jsondataname="jsondata.name"            	
    :jsondatadescription="jsondata.description" v-if="isVisible" @close="isVisible = false" 
    v-model="isVisible"@usePrompt="(msg: string) => finishChoosePrompt(msg)" />
    ...

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

<script setup lang="ts">
import { defineProps, reactive } from 'vue';

interface Jsondata {
  
  name: string;
  description: string;
  prompts: string;
 
  background: string;
  icon: string;
}

const props = defineProps({
  jsondataicon:String, 
  jsondataname:String, 
  jsondatadescription:String, 
  jsondatabackground:String, 
  jsondataprompts:String, 
});
const myData = reactive<Jsondata>({
    
    name: props.jsondataname as string,
    description:props.jsondatadescription as string, 
    prompts: props.jsondataprompts as string,
    background: props.jsondatabackground as string,
    icon: props.jsondataicon as string,
});

详情页

2.provide

略,同上

项目地址

YACW :https://github.com/yacw-team/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值