Vue组件传值的三种方式

1、父传子

父传子使用props：
1、父组件：即在使用的子组件标签上，自定义一个绑定数据，这里我使用的是“mymsg”，将父组件的msg绑定在其上。
2、子组件：在props属性中：声明一个“mymsg”，这个是和父组件在子组件标签上自定义的名称是一样的，type是数据类型，default是自身默认值
3、子组件：在需要用到的地方直接引用“mymsg”

结果为:

2、子传父

子传父：使用this.$emit('事件名',参数1,参数2,......)
过程：父组件：在子组件标签上自定义一个事件名，改事件名和emit的事件名一致，该事件绑定的是父组件在接收到数据时要触发的事件，其参数便是从子组件接收到是数据。

过程:子组件：例如要点击传值，那么首先绑定一个点击事件，在事件执行体内使用this.$emit('事件名',参数1,参数2,......)，改事件名同父组件自定义在子组件标签上的事件名

执行结果

3、组件与组件之间

组件之间，无论是不是父子组件，都可以使用事件总线来传递
首先在main.js中定义一个eventBus(随意名)的vue实例化对象

$emit是发送数据的一方，在发送数据对应的组件设置，可以是点击时触发
第一个参数是名称，后面的都是要传递的数据

$on是接收数据的一方，在接收数据对应的组件设置，这里例子实在mounted生命周期阶段接收，
第一个参数是名称，和发送时保持一致，第二个参数是个回调函数，其参数是接收的数据

总结：
父传子使用props
子传父使用$emit
组件之间使用事件总线，$emit发送，$on接收

Vue组件传值的三种方法相关推荐

【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
vue组件传值的12种方式
Vue组件间的12种传值方式当做到比较大的项目时,一个vue文件里面可能要包含上千行代码,这样不利于后期维护与问题定位,抽离成组件就尤其重要了,我在项目中遇到组件的值如何传递的问题,刚开始接触的时候 ...
vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:['ms ...
php psot传值_三种方法教你如何用PHP模拟post提交数据
php模拟post传值在日常的工作中用到的不是很多,但是在某些特定的场合还是经常用到的. 下面,我整理了三种php模拟post传值的方法,file_get_contents.curl和socket. ...
Vue组件传值（8种传值方式）值得收藏！
前言: vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方 ...
【Vue】Vue中传值的几种方法，案例代码解析
目录一.反向传值(子组件传值给父组件) 二.$refs 三.$parent 四.$children 五.$attrs/$listeners -----多层传值六.$root ----根组件七.依 ...
Vue组件传值的几种常用方式
引言 Vue的两大特性:响应式和组件化.当项目体积和工程量开发到比较大的时候,一个vue文件有几千行代码的时候,这样是不利于开发和维护的,我们经常做的是抽离组件,而谈论组件,不得不考虑组件之间是如何传 ...
vue组件传值的八种方式
1. 父传子首先在使用子组件的标签上通过自定义属性传递变量在子组件中通过 props 接受在接收的时候有两种接收方式数组形式和对象形式对象形式可以规定传来的变量的数据类型(type)默 ...

Vue组件传值的三种方法

Vue组件传值的三种方式

1、父传子

2、子传父

3、组件与组件之间

Vue组件传值的三种方法相关推荐

最新文章

热门文章