应用六:Vue之父子组件间的三种通信方式
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)
组件是Vue的核心功能之一,也是我们在开发过程中经常要用到的。各个独立的组件之间如何进行数据的交互,下面介绍三种个人在开发过程中用过的方法~
1、props与$emit
父组件通过props的方式向子组件传递数据;子组件通过$emit,在父组件中以v-on的方式接收回传的数据。接下来请看下面一个实例,
定义父组件parent.vue,添加如下代码:
<template>
<div id="demo">
<child :message="message" @getInputValue="getInputValue"></child>
</div>
</template> <script>
import child from '@/components/common/child.vue';
export default {
name: 'demo',
components: {
child
},
data() {
return {
message: 'hello'
}
},
methods: {
getInputValue(val) {
this.message = val
console.log(this.message)
}
}
}
</script>
定义子组件child.vue,添加如下代码:
<template>
<div id="child">
<el-input v-model="message" clearable placeholder="" @change="handleChangeInput"></el-input>
</div>
</template> <script>
export default {
name: 'child',
props: {
message: String
},
methods: {
handleChangeInput(val) {
this.$emit('getInputValue', val)
}
}
}
</script>
假如子组件要访问在父组件中定义的数据message,首先要在父组件引用的子组件标签中绑定该数据,然后以props的方式传递到子组件;子组件对message做了修改之后以$emit的方式回传给父组件,父组件以方法getInputValue接收并重新赋值给message。
2、在子组件中定义get与set方法
先看如下的两段代码,定义父组件parent.vue,添加如下代码:
<template>
<div id="demo">
<child ref="childComponent"></child><br>
<el-button type="primary" @click="clickSet">set</el-button>
<el-button type="primary" @click="clickGet">get</el-button>
</div>
</template> <script>
import child from '@/components/common/child.vue';
export default {
name: 'demo',
components: {
child
},
methods: {
clickSet() {
this.$refs.childComponent.setMessage('hello world');
},
clickGet() {
let msg = this.$refs.childComponent.getMessage();
console.log(msg);
}
}
}
</script>
定义子组件child.vue,添加如下代码:
<template>
<div id="child">
<span>{{message}}</span>
</div>
</template> <script>
export default {
name: 'child',
data() {
return {
message: 'hello'
}
},
methods: {
getMessage() {
return this.message;
},
setMessage(val) {
this.message = val;
}
}
}
</script>
假如父组件要访问在子组件中定义的数据message,可以通过$refs的方式访问子组件中定义的getMessage和setMessage方法。
3、Vuex
vuex状态管理用于全局存储数据状态,具体的应用请查阅前文《应用四:Vue之VUEX状态管理》,在此就不再详细说明。
应用六:Vue之父子组件间的三种通信方式的更多相关文章
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 组件间的几种通信方式
Props配置 原理:通过props配置,进行父子组件间的通信,跨父子通信需要其他组件进行过渡. 使用: 传递方在标签中添加传递内容 <Son :newName="name" ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- vue的父子组件间的相互传参props及props数据的多种验证机制
感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- vue.js 父子组件间 props 数据同步处理
常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...
- 【vue】父子组件间通信----传函数
(一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...
随机推荐
- 51nod1134 最长递增子序列【动态规划】
给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10. Input 第1行:1个数N ...
- [jzoj 5776]【NOIP2008模拟】小x游世界树 (树形dp)
传送门 Description 小x得到了一个(不可靠的)小道消息,传说中的神岛阿瓦隆在格陵兰海的某处,据说那里埋藏着亚瑟王的宝藏,这引起了小x的好奇,但当他想前往阿瓦隆时发现那里只有圣诞节时才能到达 ...
- 使用正则表达式爬取500px上的图片
网址:https://500px.com/seanarcher,seanarcher是一个up主的名字 打开这个网址,会发现有好多图片,具体到每一个图片的url地址 https://500px.com ...
- 在Win32 Application 环境下实现MFC窗口的创建
// Win32下MFC.cpp : Defines the entry point for the application.// #include "stdafx.h" clas ...
- hdu 2897简单博弈
#include<stdio.h> int main() { int n,p,q,k; while(scanf("%d%d%d",&n,& ...
- java中类的路径为什么这么长
- Linux查看文件内容命令:more(转)
Linux more命令类似cat ,不过会以一页一页的形式显示,更方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按b键就会往回(back)一页显示,而且还有搜寻字串的功 ...
- libev与libuv的区别
参考: http://blog.csdn.net/w616589292/article/details/46475555 libuv 和 libev ,两个名字相当相近的 I/O Library,最近 ...
- NEFU 115
刚开始,做了水题 #include <iostream> #include <cstdio> #include <algorithm> using namespac ...
- CSDN日报20170416 ——《为什么程序猿话少钱多死得早?》
[程序人生]为什么程序猿话少钱多死得早? 作者:文奇 我在想,程序猿都是话少吗?不一定吧.像我和我的同学.都是话非常多啊. 可是经历过非常多事的如今.再想想,发现事实的确如此.程序猿确实话少. 我是一 ...