vue组件间通信

1、父组件向子组件传值

2、子组件向父组件传值

3、父组件调用子组件方法

4、子组件调用父组件方法

5、平级组件间通信

1y T0 发布于2年前

最佳解决方案

1、父组件向子组件传值

通过属性传值,引入子组件,绑定属性 :属性名 或 v-bind:属性名,子组件通过props接收传递过来的值

2、子组件向父组件传值

通过 this.$emit将事件和参数传递给父组件

3、父组件调用子组件方法

(a):给子组件加一个ref引用,父组件通过this.$refs即可找到该子组件,也可以操作子组件的方法:this.$refs.ref名.子组件方法;

(b): 通过$children,可以获 取到所有子组件的集合:this.children[0].方法

4、子组件调用父组件方法

通过$parent可以找到父组件,进而调用其方法:this.$parent.父组件方法

5、平级组件间通信

(a): 创建一个公共文件eventBus.js,只是创建一个空的vue实例 export default new Vue();通过eventBus.$emit()传递事件和参数,通过eventBus.$on()接收事件和参数。
(b): 使用vuex

1y T0 被采纳率33%
2021-03-06 16:29
打赏 2 1
页面统计
944 访问
2 帮助
0.00 打赏

hierror 2019 © hierror.com 京ICP备13026190号-1

通知消息
  • 暂无任何消息