Vue3组件之间的通信方式

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量223 收藏
点赞数
分类专栏： Vue3 文章标签： vue vue.js
MW
本文链接：https://blog.csdn.net/qq_42222342/article/details/130803517
版权

props

实现了父组件给子组件传值

  • 父组件
<template>
    <div class="box">
        <h1>父组件</h1>  
        <hr>  
    <Child info="测试" :momeny="momeny"></Child>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const momeny=ref(100)
import Child from './Child.vue';
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
}
    </style>
  • 子组件
<template>
   <div class="te">
    子组件
    <br>
    {{ info }}
    <br>
    {{ momeny }}
   </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";
// 需要使用到defineProps方法去接受父组件传递过来的数据
// PropType 校验数据类型
// 
const props = defineProps({
  info: {
    //  required 字段是否必传
    required: true,
    type: String as PropType<String>,
    default: "",
  },
  momeny: {
    required: true,
    type: Number as PropType<Number>,
    default:0,
  },
  IsA: {
    required: false,
    type: Boolean as PropType<Boolean>,
    default:true,
  }
});
</script>

<style lang="scss" scoped>
.te{
    width: 400px;
    height: 200px;
    background-color: rgb(218, 195, 26);
}
</style>

自定义事件

实现了 子组件给父组件传值

  • 父组件
<template>
    <div class="box">
        <h1>父组件</h1>  
        <hr>  
        <EventChile @handle="handle" @click="handleClick"/>
    </div>
    
</template>

<script setup lang="ts">
import EventChile from './EventChile.vue'
const handle=(parms1,parm2)=>{
    console.log(parms1,parm2)
}
const handleClick=(parms1,parm2)=>{
    console.log(parms1,parm2)
}
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
}
</style>
  • 子组件
<template>
    子组件
    <br>
    <button @click="handleClick">点击触发自定义事件</button>
    <button @click="$emit('click','测试1',100)">点击触发</button>
</template>

<script setup lang="ts">
// 利用defineEmits 方法返回函数触发自定义事件
const $emit=defineEmits(['handle','click'])
const handleClick=()=>{
    // 第一个参数事件类型，第二个 或者N个 参数为注入参数
    $emit('handle','测试',100)
}

</script>

<style lang="scss" scoped></style>

全局事件总线

实现跨组件传值

  • 添加mitt
cnpm i mitt
  • 添加mitt
import mitt from 'mitt';
const $bus=mitt();

export default $bus;
  • 父组件
<template>
    <div class="box">
        <h1>父组件</h1>  
        <hr>  
        <div class="box-child">
            <EventChild/>
            <EventChild1/>
        </div>
    </div>
</template>

<script setup lang="ts">
import EventChild from './EventChild.vue'
import EventChild1 from './EventChild1.vue'
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
    .box-child{
        display: flex;
        justify-content: space-between;

    }
}
    </style>
  • 子组件1
<template>
    <div class="child">
        子组件
        <br>
        接受到的元素
        {{ text }}
        {{ memeny }}
    </div>
</template>

<script setup lang="ts">
import $bus from '../../bus';
import {ref} from 'vue'
const text=ref('')
const memeny=ref(0)
$bus.on('car',(car)=>{
    text.value=car.text
    memeny.value=car.memeny
})
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 300px;
    background-color: yellow;
}
</style>
  • 子组件2
<template>
    <div class="child">
        子组件
        <br>
        <button @click="handleClick">点击给另一个子组件传值</button>
    </div>
</template>

<script setup lang="ts">
import $bus from '../../bus';
const handleClick=()=>{
    $bus.emit('car',{
        text:'测试',
        memeny:100
    })
}
</script>

<style lang="scss" scoped>
.child{
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
}
</style>

v-model

  • 父组件
<template>
    <div class="box">
        <h1>父组件{{ momeny }}</h1>  
        <hr>  
      <ModelChild  v-model:momeny="momeny" ></ModelChild>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const momeny=ref(100)
import ModelChild from './ModelChild.vue';

</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
}
    </style>
  • 子组件
<template>
  子组件
  <br />
  {{ momeny }}
  <button @click="handleAdd">添加</button>
</template>

<script setup lang="ts">
import { PropType } from "vue";
const $emit = defineEmits(["update:momeny"]);
const props = defineProps({
  momeny: {
    required: true,
    type: Number as PropType<Number>,
    default: 0,
  },
});
const handleAdd = () => {
  $emit("update:momeny", props.momeny + 100);
};
</script>

<style lang="scss" scoped></style>

useAttrs

-父组件

<template>
    <div class="box">
        <h1>父组件</h1>  
        <hr>  
    <Child info="测试" :momeny="momeny" @click="handle"></Child>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const momeny=ref(100)
import Child from './Child.vue';
const handle=()=>{
    console.log(111)
}
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
}
    </style>
  • 子组件
<template>
    子组件
    {{ atts.info  }}
    {{ atts.momeny  }}
</template>

<script setup lang="ts">
import { useAttrs } from 'vue';
const atts= useAttrs()
console.log(atts)
</script>

<style lang="scss" scoped></style>

provide 和inject

  • 父组件
<template>
    <div class="box">
        <h1>父组件  {{ car }}</h1>  
        <hr>  
    <Child></Child>
    </div>
</template>

<script setup lang="ts">
import {ref,provide} from 'vue'
import Child from './Child.vue';
const car=ref('汽车')
// vue3 提供了provide（提供） 与inject（注入），可以实现隔辈组件传递数据
// 两个参数 ：
//      1.第一个参数就是提供的数据的key
//      2.第二个参数就是需要提供的数据
provide("TOKEN",car)
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
}
    </style>
  • 子组件
<template>
    <div class="box2">
        子组件
        <hr>
        <Grandson />
    </div>
</template>

<script setup lang="ts">
import Grandson from './Grandson.vue';
</script>

<style lang="scss" scoped>
.box2 {
    width: 100vw;
    height: 300px;
    background-color: rgb(24, 15, 195);
    color: #FFF;
}
</style>
  • 孙子组件
<template>
    <div class="box1">
        孙子组件
        {{ car }}
    </div>
</template>

<script setup lang="ts">
// 注入祖先组件提供数据
import {inject} from 'vue'
// 需要参数: 提供者的数据的Key
const car=inject('TOKEN')
</script>

<style lang="scss" scoped>
.box1{
    width: 100vw;
    height: 100px;
    background-color: rgb(213, 5, 137);
}
</style>

ref和$parent

  • 父组件
<template>
    <div class="box">
        <h1>父组件:{{ money }}</h1>  
        <button @click="handleClcik">找子组件借钱</button>
        <hr>  
        <div class="box_child">
            <Son ref="son"/>
            <Do/>
        </div>
    </div>
</template>

<script setup lang="ts">
// ref:可以获取真实的DOM节点，可以获取到子组件实例VC
// $parent：可以在子组件内部获取到父组件的实例
import {ref} from 'vue'
import Son from './Son.vue'
import Do from './Do.vue'
const money=ref(1000)
const son= ref()
const handleClcik=()=>{
    money.value+=10
    son.value.money-=10
    son.value.handleCL()
}

// 组件内部数据对外关闭的，别人不能访问
// 如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
    money,
})
</script>

<style lang="scss" scoped>
.box{
    width: 100vw;
    height: 400px;
    background-color: aquamarine;
    .box_child{
        display: flex;
    }
}
    </style>
  • 子组件1
<template>
    <div class="box1">
        <h1>子组件:{{ money }}</h1>  
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const money=ref(500)

const handleCL=()=>{
    console.log('子组件方法')
}
// 组件内部数据对外关闭的，别人不能访问
// 如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
    money,
    handleCL
})
</script>

<style lang="scss" scoped>
.box1{
    width: 100vw;
    height: 300px;
    background-color: rgb(12, 107, 185);
}
    </style>
  • 子组件2
<template>
    <div class="box1">
        <h1>子组件:{{ money }}</h1>  
        <button @click="handleClickD($parent)">想父组件借钱</button>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const money=ref(200)
const handleClickD=($parent)=>{
    console.log(parent)
    money.value+=20
    $parent.money-=20
}

</script>

<style lang="scss" scoped>
.box1{
    width: 100vw;
    height: 300px;
    background-color: rgb(150, 16, 128);
}
    </style>

pinia

插槽

MW0309
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3组件通信的方式
xhjtcflm的博客
06-18 696
在子组件标签体内写上要传递的数据，:text1="text1"，是动态绑定要传递的数据。使用defineProps。
八种Vue组件间通讯方式合集(推荐)
10-14
以上就是Vue组件间通讯的八种常见方式，每种方式都有其适用场景和优缺点。开发者应根据实际需求选择合适的方法，以保持代码的清晰性和可维护性。在项目开发过程中，理解并灵活运用这些通讯方式，能够提高开发效率，...
Vue3【一】组件间的通信方式汇总
二三的博客
08-06 2446
父子组件通信是Vue中必不可少的一部分，在面试的时候也会问到，本篇文章中列举了7种组件间的通信方式，也算是一个总结。
vue3 组件间互相通信（包括父子、爷孙、兄弟、全局）
技术前端，忠于热爱 @回忆哆啦没有A梦
04-11 2万+
vue3 组件间通信方式（包括父子、爷孙、兄弟、全局），最全面的组件通信方式。
Vue3组件开发-父子组件之间通信的方式
米儿的博客
06-24 2334
父子组件之间如何进行通信呢？ 父组件传递给子组件：通过props属性； 子组件传递给父组件：通过$emit触发事件； 一、父组件传递给子组件 在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示： 这个时候我们可以通过props来完成组件之间的通信； 什么是Props呢？ Props是你可以在组件上注册一些自定义的attribute； 父组件给这些attri...
Vue3组件间的通信方式
m0_64642443的博客
07-18 6089
目录 1.props父向子组件通信2.自定义事件 子向父组件通信3.全局事件总线4.v-model组件通信（父子组件数据同步）绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parentref获取子组件实例对象 $parent获取父组件实例对象 7.provide-inject 可以实现隔辈传输8.Pinia选择式API：组合式API：父组件：props用于父组件向子组件传递数据，子组件用defineProps接收父组件传递来的参数在父组件中我们可以在使用子组件时，对其传递p
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
Vue3组件之间通信方式
weixin_65251013的博客
03-23 544
我是子组件1</p>-- 父组件绑定事件@click作用在跟节点上的 --><button>点击我也执行</button></div></script>.son {</style>Event2子组件<template><p>我是子组件2点击我触发自定义事件xxx
【Vue3基础】Vue3 组件间通信
cannotbecounted的博客
07-10 2266
对Vue3中的组件间通信进行简要的介绍。
Vue3 组件间通信的七种方式
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
11-17 403
Vue3 组件间通信的七种方式
vue3组件通信方式汇总
前端攻城狮
02-20 1127
vue3通信方式汇总
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
13.（vue3.x+vite）组件间通信方式之provide与inject.rar
09-19
总结来说，Vue3.x的`provide`和`inject`提供了一种直接的、跨级的组件通信方式，适用于那些不希望经过多层props传递或使用事件的情况下。然而，应谨慎使用，保持良好的代码组织和可维护性。同时，结合Vite这样的现代...
详解Vue组件之间通信的七种方式
10-17
主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
10.（vue3.x+vite）组件间通信方式之props与$emit.rar
09-19
在这个“10.（vue3.x+vite）组件间通信方式之props与$emit.rar”压缩包中，我们主要探讨的是使用Vue3.x的props和$emit进行组件间的通信。 首先，让我们深入了解props。Props是用来将数据从父组件传递给子组件的一种...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 321
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 756
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 230
el-table实现。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 913
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MW0309

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值