vue3-组件间方法传递和响应（重要）

已于 2023-12-15 14:36:39 修改
阅读量284 收藏
点赞数
分类专栏： 实践经验 文章标签： 前端 vue.js
于 2023-09-11 17:35:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zmy967131/article/details/132812942
版权

1、子组件通知父组件某时执行父组件的函数

父组件 

当子组件emit时，父组件clickEven函数就执行了

子组件

———————————————————————————————————————————

2、父组件通知子组件某时执行自己的一个函数

父组件

一定要有nextTick

子组件

定义好initialize函数，一定要记得暴露！！！

———————————————————————————————————————————

3、自定义组件的代代传递，触发父组件的方法

父组件     给子组件绑定函数

子组件     接受

在需要的地方直接触发，此时父组件就会执行getAdminstratorListWrap方法

 

孙子组件也可以让父组件触发getAdminstratorListWrap方法，可以代代传递

儿子组件

孙子组件

前端小怪兽zmy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js 3.x 中跨层级组件如何传递数据？
Asheng 的前端笔记
05-05 1470
在 Vue.js 3.x 中，provide/inject 的实现原理是什么？provide/inject 是如何做到跨层级传递数据的？
Vue3父子组件之间的传值、调用事件
qq_45682362的博客
07-30 169
父组件中定义一个变量，
VUE3多层组件传值（复杂场景）provide/inject
shaleilei的博客
05-20 773
单纯使用provide和inject机制只能实现祖父组件向孙组件传递数据，而无法实现孙组件向祖父组件传递数据。如果需要实现双向通信，可以结合provide和inject与事件机制或状态管理库来完成。
vue多层嵌套组件传递事件
出来和你看月亮
02-23 1327
有a,b,c三个组件,a嵌套b,b嵌套c,怎么在c页面点击返回回到a页面? props适用于父子组件传值 vuex适用于大型项目,在相对简单的项目里比较麻烦 适用attrs和attrs和attrs和listenes,
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-18 6412
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件，请把用户输入的值msg传出去//也可以不传参数.itxst{
Vue中多级(三级)组件传值
我是咸鱼闲又闲
09-24 4289
需求：A --> 子组件B --> 子组件C ，（A页面的参数传值到C页面，但B页面不需要用到传递值）。 分析：有四种方法可以实现，但是前三种各有优缺点，各位看官老爷接着往下看。 方法： 1、props 和 $on、$emit (虽说可以解决多级传值问题，但是假如嵌套层级多的话，代码繁琐且中间容易出错)。 2、Vuex (用于公用数据使用频繁场景，用来传值大材小用)。 3、Bug 中间件 (无法实现事件监听) 4、$attrs、$listeners $attrs: 用于传递属性 i
Vue v-model组件封装(类似弹窗组件)
10-15
这是由于 Vue 的源码中有一个名为 `transformModel` 的函数，它决定了 `v-model` 如何绑定到组件的属性和事件。 为了扩展 `v-model` 功能，我们可以自定义 `model` 选项来指定不同的属性名和事件名。例如，我们可以...
VUE组件间参数传递样例
01-17
在Vue.js框架中，组件是...以上就是Vue组件间参数传递的主要方式，理解并灵活运用这些方法，能够帮助你更好地构建可复用、可维护的Vue应用。在实际开发中，应结合具体场景选择合适的方式，遵循最佳实践，提升代码质量。
Vue 父子组件的数据传递、修改和更新方法
08-27
然而，可以使用props从父组件向子组件传递数据。若需要父组件实时更新子组件的状态，可以通过子组件触发自定义事件（`$emit`）来实现。例如，子组件中可以这样触发事件： ```javascript this.$emit('updateData', ...
vue2与vue3的使用区别与组件通信
09-12
本篇文章将深入探讨Vue2和Vue3在使用上的主要区别以及组件通信的方法。 ### Vue2与Vue3的区别 #### 1. Composition API Vue2 使用的是 Options API，所有组件选项如 data、methods、computed 等都直接在组件选项...
【vue】多层级组件传值（通讯）方式
八块腹肌的博客
05-08 3254
$listeners和$attrs $listeners是将三级组件的事件和参数传递给一二级组件 $attrs可以将一级组件的数据直接在三级组件中使用，比较优雅的一个传值方式，不用像props那么繁琐 在一级组件中引入二级组件，并将data和message传递给二级组件；getLevel3Messgae是三级组件中的事件 <template> <!-- 一级组件 --> <div class="level-1"> <!-- 二级组件 --&g
Vue3 组件通信、组件间传值的几种方式(分享)
weixin_60547084的博客
03-03 785
define 开头的都是使用的宏编译，不需要导入。后面的列子都是使用 setup 语法糖的写法。
vue内父子组件通信、事件传递及多层嵌套组件如何传递事件
weixin_41993525的博客
11-03 6831
父子组件通信 父组件向子组件传值 - props 组件A <template> <div> <b :option="option"></b> <div> </template> <script> import B from "b"; export default { components:{ B }, data(){ return { option:[] } } } </script&
vue3 中 多层组件嵌套,插槽实现, 以及插槽值向上传递
一直记录
01-11 2602
【代码】vue3 中 多层组件嵌套,插槽实现, 以及插槽值向上传递。
Vue3的 组件事件
一个努力不被优化的程序员
02-02 2000
总结来说，Vue3对组件事件进行了一些改进和优化。通过使用emits选项声明自定义事件，以及引入provide和inject进行跨层级组件通信，使组件事件的使用更加方便和灵活。同时，通过简化原生DOM事件的绑定方式，提高了代码的可读性和可维护性。这些改进和优化使得Vue3的组件事件更加强大和易用。
Vue3 事件处理简单应用
javaGHui的博客
08-08 250
Vue3 事件处理简单应用
vue3组件之间数据传递
123
03-14 8408
1. 父传子 遵循vue的单向数据流，就是父组件能往子组件传递数据，但是子组件不能回传，父组件传递子组件数据的方式 就是在组件标签上使用属性绑定的方式进行传递，子组件中定义props对象，定义需要接受的数据，在setup中的props定义 父传子类型 父组件 <template> <div>parent</div> <Child></Child> </template> <script> import Chi
Vue3中父子组件相互触发方法
前端菜鸡的博客
08-26 4849
1. 父组件触发子组件的方法 父组件代码如下： <template> <div class="parent"> <button @click="getChild">触发子组件方法</button> <!-- 1. 定义ref --> <child ref="childRef"></child> </div> </template>.
vue父子组件的数据传递、修改和更新方法
05-01
Vue中父子组件之间的数据传递、修改和更新方法主要有两种，分别是props和$emit。 1. props：通过在父组件中使用子组件的属性来将数据传递给子组件。子组件可以通过在props选项中声明需要传递的属性名，然后在子组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值