应用六: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 ...
随机推荐
- Intro.js 分步向导插件使用方法
简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...
- C# 实现串口发送数据(不用串口控件版)
参考:https://blog.csdn.net/mannix_lei/article/details/79979432 https://www.cnblogs.com/ElijahZeng/p/76 ...
- java获取文件的父目录
File file = new File("a.txt"); String parentPath = file.getParent(); // null File parentDi ...
- 【习题 4-8 UVA - 12108】Extraordinarily Tired Students
[链接] 我是链接,点我呀:) [题意] [题解] 一个单位时间.一个单位时间地模拟就好. 然后对于每个人. 记录它所处的周期下标idx 每个单位时间都会让每个人的idx++ 注意从醒着到睡着的分界线 ...
- JAVA数据库连接的另一种实现及简单的数据插入及显示
教材是JDK8的,家里也可以正规的测试JDK8, 但公司电脑是JDK6的,所以代码要相应的变动一下下,以适应老的TRY语句. Message.java package cc.openhome; imp ...
- [bzoj3062][Usaco13Feb]Taxi_贪心
Taxi bzoj-3062 Usaco13Feb 题目大意:有n个奶牛想坐出租车.第i头奶牛在起点a[i]等候,想坐出租车到b[i].Bessie从0出车,车上只能坐一头奶牛.她必须完成所有奶牛的要 ...
- kafka内置的zookeeper
kafka 很多说不需要安装zk的是因为他们都使用了kafka自带的zk 至于kafka为什么使用zk,你首先要知道zk的作用, 作为去中心化的集群模式. 需要要消费者知道现在那些生产者(对于消费者而 ...
- spring 源码解析
1. [文件] spring源码.txt ~ 15B 下载(167) ? 1 springн┤┬вио╬Ш: 2. [文件] spring源码分析之AOP.txt ~ 15KB 下载( ...
- Memcache 和 Radis 比较
Memcache 和 Radis 比较 2014-03-28 11:00 2447人阅读 评论(0) 收藏 举报 分类: memcache(6) Redis(7) 版权声明:本文为博主原创文章, ...
- Running the app on your device
So far, you've run the app on the Simulator. That's nice and all but probably notwhy you're learning ...