vue3的兄弟传参(三种方法)

这篇具有很好参考价值的文章主要介绍了vue3的兄弟传参(三种方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.兄弟A先给父元素 父元素再给子组件B (vue2的思路)
A组件

<template> 
    <div style="width:300px;height:200px;background:blue"> 
        <button @click="add">A派发事件</button> 
    </div>
</template>
<script setup lang="ts">
import { defineEmits } from "vue" 
// emit
const emit=defineEmits(['onclick']);
let  flag=false;
const add=()=>{
    flag=!flag;
  emit('onclick',flag)
}
 
</script>

<style scoped>

</style>

父组件

<template>
  <div>
    <A  @onclick="onclick"></A>
    //在把A组件传输的值传给组件B
    <B :flag='flag'></B>
    A组件传输的值{{flag}}
  </div>
</template>

<script setup lang="ts">
import  {ref} from 'vue'
import  A from './components/fuzi/A.vue'
import  B from './components/fuzi/B.vue'
let  flag=ref(null);
const onclick=(params:boolean)=>{
//拿到传输的值赋给变量flag
flag.value=params;

}

</script>

<style scoped>

</style>

组件B

<template>
    <div style="width:300px;height:200px;background:red"> 
      B组件接受的值:  {{flag}}
    </div>
</template>

<script setup lang="ts">
import { defineProps} from "vue";
import  mitts  from '../../util/bus.js';
 
type Props={
    flag:boolean
}
defineProps<Props>();
</script>

<style scoped>

</style>

2.兄弟组件直接传输 (局部引入)

npm install mitt

定义一个bus.js

import  mitt  from 'mitt';
const  mitts=mitt();
export default mitts;

组件A:

<template> 
    <div style="width:300px;height:200px;background:blue">
        <button @click="child">兄弟传参</button>
    </div>
</template>
<script setup lang="ts">
import  mitts  from '../../util/bus.js'; 
let  flag=false;
const  child=()=>{
    mitts.emit('event',flag)
}
</script>

<style scoped>

</style>

组件B:

<template>
    <div style="width:300px;height:200px;background:red"> 
      B组件接受的值:  {{flag}}
    </div>
</template>

<script setup lang="ts">
import {onBeforeMount,ref} from "vue";
import  mitts  from '../../util/bus.js';
 let  flag=ref(null);
onBeforeMount(()=>{
  mitts.on('event',(e:boolean)=>{
      flag.value=e
  })
})
</script>

<style scoped>

</style>

3.兄弟传参(全局引入)

npm install mitt

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import mitt from 'mitt'
const  app=createApp(App);
app.config.globalProperties.$mitt=mitt();
app.mount('#app')

组件A

<template> 
    <div style="width:300px;height:200px;background:blue"> 
        <button @click="child">兄弟传参</button>
    </div>
</template>
<script setup lang="ts">
import {  getCurrentInstance,ComponentInternalInstance  } from "vue" 
const {appContext }=getCurrentInstance() as ComponentInternalInstance
let  flag=false;
 const  child=()=>{
    flag=!flag; 
    appContext.config.globalProperties.$mitt.emit('event',flag) 
}
</script>

<style scoped>

</style>

兄弟B文章来源地址https://www.toymoban.com/news/detail-645701.html

<template>
    <div style="width:300px;height:200px;background:red"> 
     {{flag}}
    </div>
</template>

<script setup lang="ts">
import { ref ,onBeforeMount,getCurrentInstance,ComponentInternalInstance} from "vue";
type Props={
    flag:boolean
} 
const flag<Props>=ref(null);
const {appContext}=getCurrentInstance() as ComponentInternalInstance 
onBeforeMount(()=>{
    appContext.config.globalProperties.$mitt.on('event',(e:boolean)=>{ 
      flag.value=e;

  })
 
</script>

<style scoped>

</style>

到了这里,关于vue3的兄弟传参(三种方法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue组成部分:前端后端调用方法传参(实操基础版)

    前言     前后端传递信息,POST、Get方法,精简版     在 RestFul API 中,前后端是分离的,后端不在负责视图的渲染,只负责返回指定的前端请求后端 Rest 风格的 API,后端接收到前端的请求之后,会根据请求方法类型,参数执行一些对应的操作。然后返回 JSON 格式的数据给

    2023年04月23日
    浏览(40)
  • VUE3+TS(父子、兄弟组件通信)

    目录 父传子值、方法(子调用父值、方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值、方法) 兄弟(任意组件)通信 引入Mitt来完成任意组件通信 1、统一规范写法,通过在子组件标签上绑定属性和值,来传递到子组件,子组件再通过defineProps来接收,先给其

    2023年04月08日
    浏览(47)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(61)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(75)
  • 【Vue3】Vue3中reactive变量重新赋值无法响应的三种处理方法(已解决)

    1、html 2、定义reactive变量 3、重新赋值   1、html 2、定义ref变量 3、赋值 第三种方案:push(不推荐)

    2024年02月15日
    浏览(47)
  • vue3.0如何关闭eslint校验的三种方法

    一、在创建vue3项目时的要选择ESLint with error prevention only此选项! 1、选择Manually select feature(手动选择功能)这个选项。 2、选择必用的babel,router,vuex,css功能不要选择(linter)这个选项,从根源上避免ESLint的出现。 3、 选择vue3版本。 二、通过找到并打开.eslintrc.js  文件,把 

    2024年02月11日
    浏览(71)
  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(49)
  • vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)

    目录 前言:目前组件通信方法有好多种,我这挑选一部分来讲 1、父传子 2、子传父 3、兄弟之间通信 3.1、父组件充当中间件 3.2、全局事件总线—EventBus 4、爷孙之间通信 5、任意组件、全局 方案 父传子 子传父 props / emits props emits v-model / emits v-model emits ref / emits ref emits provi

    2024年02月15日
    浏览(41)
  • 三种方法实现tab栏切换(CSS方法、JS方法、Vue方法)

    给下图的静态页面添加tab栏切换效果  

    2024年02月13日
    浏览(47)
  • vue3 微信扫码登录及获取个人信息实现的三种方法

    一、流程: 微信提供的扫码方式有两种,分别是: 根据文档我们可以知道关于扫码授权的模式整体流程为: 二、前置条件: 微信开发官网 申请: appid: ‘’, // 后端提供 redirect_uri: ‘’, // 后端提供 AppSecret // 后端提供 三、具体登录实现 实现方式一: 使用vue插件: 使用: 结果

    2023年04月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包