触发父组件变量_Vue组件之间的传值

我们知道组件之间传值无非就三种情况

父组件给子组件传值
子组件给父组件传值
兄弟组件之间的传值

父 => 子

老王是个有钱人，准备把自己的家产传给宝贝儿子小王

用代码模拟实现就是下图这样

现在小王还是一位三无青年

创建一个 '小王' 组件

现在老王要把自己的财产都传给儿子了

首先需要在子组件自定义要传递的值的属性，用于子组件接收数据使用

然后在子组件上通过用props接受(一个数组)，就可以直接在页面上使用了

然后在父组件中定义一个传递数据的方法，将定义好的父子数据交换即可

看看效果

这样就实现了父组件给子组件传递数据。

接下来再看看子组件给父组件如何传递数据

子 => 父

小王为了回报老王的养育之恩，准备送给老王一件貂皮大衣

其本质原理就是父组件给子组件身上定义一个事件(事件处理程序写在父组件中)子组件通过 $emit 触发这个事件的同时传递数据，父组件就能接受到数据了

具体实现:

然后在父组件中提供定义的时间处理程序 getSon

注意：在子组件中提供的方法 @tofater 必须是小写的，如果使用驼峰命名会报错

然后子组件中通过 $emit 就能触发父组件传递过来的事件,并把数据 clothes带过去

然后老王就得到儿子送的大衣了

接下来看看兄弟组件之间如何传值

一般可以借助bus来实现(公交车：事件总线，其实就是一个空的vue实例)

谁需要得到值，谁就在bus上注册一个事件用于接收值，需要发送数据的组件去触发这个事件的同时将数据带过去就行了

以下面这个例子看，页面上有两个相邻的组件，他们都在同一个父组件中，想要实现杰克组件和肉丝组件互相传递数据

第一步要在需要接受数据的组件注册一个事件(可以在初始化时候通过bus注册)

如下图所示，肉丝组件在初始化的时候在bus上注册了一个getjiekemsg(图中1)事件，事件的处理程序(图中2)，当杰克组件出发这个程序时就能会执行这个函数

注册事件语法：bus.$on('getjiekemsg', this.getJiekeMsg)

杰克组件通过bus获取肉丝注册的事件并触发并将数据传递过去(如下图)

触发bus中的事件语法bus.$emit('getjiekemsg', this.toRousiMsg)

此时就完成了杰克向肉丝传递数据的功能

肉丝收到杰克传递的数据后，也可以回应，以同样的方式杰克在初始化时给bus注册一个事件，肉丝去触发

这样就完成了兄弟组件之间的传值

组件之间相互传值是实际开发中最常见的基本需求了，实现的方法方式不局限于上面，比如存储到本地(Storage)、通过vuex、路由跳转传参等都可以实现组件间的数据传递。

触发父组件变量_Vue组件之间的传值相关推荐

vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
iframe父页面与子页面之间的传值问题
一.父页面给iframe中的子页面传值,把值写入子页面的文本框里 father.html <script language="javascript" src="ht ...
Vue组件（二）父组件、子组件通信/传值
一.Vue 父组件访问子组件 1.父组件获取子组件对象通过ref引用属性访问子组件对象定义: <StudentInfo :num="parentNum" ref=&quo ...
父子组建传值_父子组件及兄弟组件传值demo
vue示例此文档包含Vue,React和小程序示例首先说一下三者在父子组件传值的异同点,语法上三者在父级向子级传递过程中都使用的是props,父级定义内容,子级进行接收.而在子级向父级进行传递过程 ...
vue变量传值_vue组件与组件之间传值
目录一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件之间的传值如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件一.父组件向子组件传值: html代码: <div i ...
vue中点击加号_vue 组件之间事件触发($emit)与event Bus($on)的用法说明
组件之间事件触发之前使用组件,并不是很频繁,是水平的问题,目前工作中,公司大佬带着我手写过一个组件,再此很感谢他的指导.目前简单的组件已经有了自己的逻辑思维,正在从低级码农向中级码农蜕变.废话不多说 ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
【vue】父组件与子组件之间的数据交互
一.前端项目目录结构二.vue单文件组件格式注意1: scoped表示对当前组件生效 <style scoped> </style> 这个是设置组件中html样式(css) ...
vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...

触发父组件变量_Vue组件之间的传值

触发父组件变量_Vue组件之间的传值相关推荐

最新文章

热门文章