Vue中的props、slot、emit、proProvide/Inject的区别即使用场景

最新推荐文章于 2024-07-12 18:36:18 发布
原创 最新推荐文章于 2024-07-12 18:36:18 发布 · 252 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

vue3中能通过props、slot、emit、proProvide/Inject来进行数据的传递，那么到底用哪个好呢？我觉得proProvide/Inject是最简单的方式，那么还需要用porps、slot、emit吗

其实除了这些东西，还有一种办法，就是直接创建一个js文件：

假如我们有一个这样的需求：

实现点击按钮时会触发两个count都++  也就是两个组件的部分数据或函数都是同一个，要实现这样的操作，我们常常 这样做：

直接创建了一个js文件写vue的代码，然后js代码又没有vue组件的功能搞template什么的  所以只有script中的部分功能  刚好用来将多个数据绑定在一起，

将专门用来export的js文件放在store文件夹下，然后在需要绑定同一个数据或函数的vue组件中导入并使用即可

conquer_galaxy
关注
介绍 Vue 中组件之间通信的几种方式,如 props、 event、 Vuex、 provide/inject 等
祈澈菇凉
06-03 460
这种方式适用于简单的父子组件关系,但不推荐在复杂的组件树中使用,因为会破坏组件的独立性。Vuex 提供了统一的状态管理机制,适用于跨层级或无直接关系的组件之间的通信。父组件向子组件传递数据,子组件通过 props 接收父组件传递的数据。这种方式适用于跨层级的组件通信,尤其是当需要向深层子组件传递数据时。这种方式适用于无直接关系的组件之间的通信,但需要手动管理事件监听。父组件监听子组件的自定义事件,并在事件回调中处理数据。这是最基本的组件通信方式,适用于简单的父子组件关系。
vue2中provide/inject的使用
qq_37635012的博客
05-19 2019
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。// 祖先组件 data() {return {obj : {name : "小明" } } } , provide : function() {return {// 传递一个对象 obj : this . obj } } , // 孙子组件 inject : [ 'obj' ] , computed : {
vue基础（二）：组件(props、$ref、$emit、<solt>、.native）
weixin_39520640的博客
08-14 3455
1、父子组件 //父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '../components/child.vue' export...
Vue 组件from,Props (defineProps) ，Emits, 插槽＜slot/＞（个人记录-4）
豆子的博客
10-18 739
Vue 组件from,Props (defineProps) ，Emits, 插槽（个人记录-4）
provide与inject 数据更改
weixin_42497127的博客
02-20 2579
provide与inject方法传值.
Vue3中props和defineEmit的区别
fang_my的博客
06-25 1754
由于之前写的项目都是基于react来开发和思考的，转到vue中从来未接触过这个概念，官方的文档写的也不是特别清楚，（也或许是我的思想还尚未从react的编程理念中转出来）查阅了很多作者关于的解释，但从他们的回答中也并不能理解的特别透彻。好在这几天通过公司项目的练手，自己又查阅了一些视频，终于明白了这个方法的基本逻辑。如果你是react转vue，那么本文将对你有很大的帮助；如果你是vue的初学者，也不要害怕，本文尽可能使用“说人话”的角度去解释。阅读本文的前提条件，你需要对组件通讯，靠来实现这个概念有较好的理
provide/inject和Prorp的使用及区别
zzjbj910的博客
05-18 508
props一般是绑定到元素上面的；而provide/inject是成对使用的。props一般是绑定到元素上面的；而provide/inject是成对使用的。props主要是数值绑定，provide/inject可以绑定方法。props主要是数值绑定，provide/inject可以绑定方法。props是响应式的，provide/inject不是响应式的。props是响应式的，provide/inject不是响应式的。props可以通过sync指令进行双向绑定。props可以通过sync指令进行双向绑定。
vue3父子props 非props emit slot 具名/动态/作用域slot 动态/异步组件suspense $refs 生命周期
Anna_Liqi的博客
06-26 520
component props emit
vue3学习教程第十三节（组件之间传参通讯：props/$emit/$on/provide/inject/$attrs/$parent/pinia）父子传参、子向父传参
刺客-Andy 的博客
04-01 1554
vue3项目中组件之间传参，事件触发：常用的六中方式：props 、$emit、$on、provide、inject、$attrs、$parent、pinia、defineExpose
Vue 父子组件通信进阶版：深入理解 Props、$emit 和 provide/inject
Kuangtian的博客
12-15 1304
通过深入理解 Vue 组件通信的高级用法，我们可以更好地应对各种场景和需求。合理使用 Props、$emit 和 provide/inject 可以让你的组件架构更加清晰和灵活。。
Vue3组件通信之$emit和provide/inject
ych1274816963的博客
07-28 1754
前面我们知道了父组件向子组件传值通过props，接下来我们再总结下子组件传递给父组件。 子组件传递给父组件 什么情况下子组件需要传递值给父组件呢？ 当子组件有一些事件发生的时候，而父组件需要更改展示的内容，那么就需要子组件向父组件传递值； 当子组件需要传递一些内容给父组件的时候；比如：父组件跳转时需要子组件的值传递到下一个页面； vue2中的用法（vue3也可以使用）： // App.vue <template> <div> <h2>当前数为：{...
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
06-18 8147
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件，请把用户输入的值msg传出去//也可以不传参数.itxst{
框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性_vue生命周期watch
2301_82244509的博客
07-12 1057
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
如何选择Vue的$emit和props与provide/inject，以及事件总线（Event Bus）
一颗松鼠
10-30 749
而对于非父子组件之间的通信，可以考虑使用事件总线（Event Bus）机制。通过创建一个中央事件管理器，组件可以订阅和触发事件来实现数据交互。对于跨层级组件之间的数据传递，可以使用。根据组件之间的关系、应用规模和需求，我们可以选择适合的数据传递和通信方式。在Vue.js中，我们有多种选择来在组件之间传递数据和通信，包括使用。来触发自定义事件，并将数据传递给父组件进行处理，同时父组件通过。应用规模：对于较小的应用程序，简单的数据传递和通信可以选择使用。数据传递关系：对于父子组件之间的数据传递，推荐使用。
【Vue全家桶】组件系列（二）—组件通信(props、$emit、事件总线、Provide、Inject)
QDCXYXZ_的博客
03-24 1728
一文带你详细了解组件间通信的多种方式
Vue3 provide和inject的使用
misschengispink的博客
02-08 1103
provide / inject 官网解析：provide / inject 1.provide 父组件/祖先组件向子组件/子孙组件传递数据时，写在父级组件里，接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值 2.inject 子组件/子孙组件接收从父级/祖先组件传递过来的数据，写在子组件里，接收一个参数 key，即父组件或祖先组件传递的数据名称 示例： 父组件a.vue <template> <div class="a">
vue - provide和inject用法
weixin_43722758的博客
08-24 309
一、概念解析 成对出现：provide和inject是成对出现的 作用：用于父组件向子孙组件传递数据 使用方法：父组件通过provide提供数据，其他组件可以使用inject注入数据。 二、代码解析 // 父组件 <template> <div> <h1> {{message}} </h1> <itemA /> // 使用子组件 </div...
vue3中的provide和inject
热门推荐
weixin_47450807的博客
02-14 2万+
在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递，但是在vue3中由于我们使用setup，此时我们应该如何去使用provide和inject函数呢？ 在vue中帮我们提供了provide和inject的函数，我们可以直接在setup函数中使用即可。 一、provide和inject的基本使用 如上图所示，此时我们将一个普通对象进行传递，然后在Home组件中通过inject函数来接收。 我们也可以通过ref和reactive进行传递。 上面代码我们可以看出在Home.v
在Vue中，哪些方法可以用于组件间的通信? $emit pinia props provide/inject
最新发布
10-22
在 Vue 中，$emit、pinia、props、provide/inject 均可用于组件间通信。 `$emit` 用于子组件向父组件发送自定义事件和数据。子组件通过 `$emit` 触发一个自定义事件，父组件监听该事件并执行相应的处理函数。示例代码如下： ```vue <!-- 子组件 --> <template> <button @click="$emit('custom-event', 'Hello from child')">触发事件</button> </template> <!-- 父组件 --> <template> <ChildComponent @custom-event="handleEvent" /> </template> <script> export default { methods: { handleEvent(data) { console.log(data); // 输出: Hello from child } } } </script> ``` `props` 用于父组件向子组件传递数据。父组件通过在子组件标签上绑定属性，子组件通过 `props` 选项接收这些属性。示例代码如下： ```vue <!-- 父组件 --> <template> <ChildComponent :message="parentMessage" /> </template> <script> export default { data() { return { parentMessage: 'Hello from parent' }; } } </script> <!-- 子组件 --> <template> <p>{{ message }}</p> </template> <script> export default { props: ['message'] } </script> ``` `provide/inject` 用于实现跨层级组件间的通信，即祖先组件向后代组件传递数据。祖先组件通过 `provide` 选项提供数据，后代组件通过 `inject` 选项注入这些数据。示例代码如下： ```vue <!-- 祖先组件 --> <template> <ChildComponent /> </template> <script> export default { provide: { sharedData: 'Shared data from ancestor' } } </script> <!-- 后代组件 --> <template> <p>{{ sharedData }}</p> </template> <script> export default { inject: ['sharedData'] } </script> ``` `pinia` 是一个 Vue 的状态管理库，可用于管理应用中的全局状态，实现任意组件间的通信。它将应用的状态集中管理，组件可以通过 `store` 实例来访问和修改这些状态。示例代码如下： ```javascript // 创建 store import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++; } } }); // 在组件中使用 store <template> <div> <p>{{ store.count }}</p> <button @click="store.increment">增加</button> </div> </template> <script> import { useCounterStore } from './store'; export default { setup() { const store = useCounterStore(); return { store }; } } </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值