vue组件通信,多种传值方式

vue.jpg

一、父组件给子组件传递值

①父组件向子组件传值

定义父组件,父组件传递menuList这个数值给子组件







②子组件通过props接收父组件传递过来的值

定义子组件,子组件通过 props方法获取父组件传递过来的值






二、子组件给父组件传递值

①子组件向父组件传值通过$emit

一般需要触发绑定事件进来传值






②父组件通过@event-child监听子组件传递过来的值

val为子组件传递给父组件的值






①this.$children 获取子组件data中的数据

②this.$parent 获取父组件data中的数据

③this.$refs 获取子组件data中的数据

1.父组件直接获取子组件中data中的数据可以直接使用

①this.$children[0]获取到子组件data中的数据或者

②this.$refs.child.arrList获取子组件data中的数据

2.子组件直接获取父组件data中的数据可以直接使用

③this.$parent获取到父组件data中的数据













三、非父子组件间的传值

事件总线,建立一个公共的js文件,用来传递消息

在utils下新建一个bus.js文件

import Vue from 'vue';
export default new Vue();






使用$on监听

如果只需要监听一次使用$once







本次就分享到这里,喜欢的关注支持,期待后期更多丰富内容

你可能感兴趣的:(vue组件通信,多种传值方式)