vue组件调用另外一个组件中的方法

vue组件调用另外一个组件中的方法,第1张

在项目灶御段中,我们可能碰到这样的需求:在vue组件中调用另外一个组件中的隐誉方法,让其执行对应的函数,下面是我总结的一些方法,不足之处希望订正谢谢。

一:如果是父子关系的话,我们可以使用下面的办法

二:如果结构比较复杂,或者不能确定 children 的下标。我们可以使用下面的办法

1、 首先在被调用的vue组件中把方法写入到vuex中( 下面的方法是吧vue组件中的所有方法都保存了)

2、vuex中

3、在需要调用的组件中调用即可

以上方法是在vue2中测试,vue3中可以试着拆慎打印一下this看看哦

父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用.

子组件向父组件传数据使用自定义事件, vue组件提供了一个 emit('自定义事件名', 传递的数据) ),子组件传递数据时,触发响应的事件函数,就会自动触发通过$emit给父组件绑定的自定义事件,自定义事件接受一个参数,参数就是子组件传递过来的数据

兄弟组件之间的数据传递,通过eventBus来做中间的桥梁,乱扮传输方通过中间组件调用 on 接受数据,两者之间的自定义属性名保持伍陪察一致。

通过vuex存储数据, Vuex是一个专为vue.js 应用程序开发的状态管理模式, 它采用[ 集中式 ]存储管理数据,以相应的规则保证状态以一种可预测的方式发生改变, 一变全变,同步更新数据。

ref 引用可以作用在h5标签上,也可以作用在组标签上,作用在h5标签上是获取的是DOM对象, 作用在组件标签上,通过this.$refs获取的腔茄是组件的实例对象。

vue组件的数据传递应该是单向,永远是向下的,把氏坦父组件属性方法传递到子组件。

如果子组件要改变不同的颜色,是应该接受父组件传递进来的props,自己调用自己的方法,把props当个参数来判断来显示什么宽前颜色,而不是让父元素调子组件的方法。

还有一种是vuex,组件本身跟store的某个值绑定,外慎核清部组件修改store的值,来影响该组件的颜色。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11976076.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存