(注:本文适用于有一定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之父子组件间的三种通信方式的更多相关文章

  1. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  2. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  3. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue 组件间的几种通信方式

    Props配置 原理:通过props配置,进行父子组件间的通信,跨父子通信需要其他组件进行过渡. 使用: 传递方在标签中添加传递内容 <Son :newName="name" ...

  5. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  6. vue的父子组件间的相互传参props及props数据的多种验证机制

    感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...

  7. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  8. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  9. 【vue】父子组件间通信----传函数

    (一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...

随机推荐

  1. Intro.js 分步向导插件使用方法

    简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...

  2. C# 实现串口发送数据(不用串口控件版)

    参考:https://blog.csdn.net/mannix_lei/article/details/79979432 https://www.cnblogs.com/ElijahZeng/p/76 ...

  3. java获取文件的父目录

    File file = new File("a.txt"); String parentPath = file.getParent(); // null File parentDi ...

  4. 【习题 4-8 UVA - 12108】Extraordinarily Tired Students

    [链接] 我是链接,点我呀:) [题意] [题解] 一个单位时间.一个单位时间地模拟就好. 然后对于每个人. 记录它所处的周期下标idx 每个单位时间都会让每个人的idx++ 注意从醒着到睡着的分界线 ...

  5. JAVA数据库连接的另一种实现及简单的数据插入及显示

    教材是JDK8的,家里也可以正规的测试JDK8, 但公司电脑是JDK6的,所以代码要相应的变动一下下,以适应老的TRY语句. Message.java package cc.openhome; imp ...

  6. [bzoj3062][Usaco13Feb]Taxi_贪心

    Taxi bzoj-3062 Usaco13Feb 题目大意:有n个奶牛想坐出租车.第i头奶牛在起点a[i]等候,想坐出租车到b[i].Bessie从0出车,车上只能坐一头奶牛.她必须完成所有奶牛的要 ...

  7. kafka内置的zookeeper

    kafka 很多说不需要安装zk的是因为他们都使用了kafka自带的zk 至于kafka为什么使用zk,你首先要知道zk的作用, 作为去中心化的集群模式. 需要要消费者知道现在那些生产者(对于消费者而 ...

  8. spring 源码解析

    1. [文件] spring源码.txt ~ 15B     下载(167) ? 1 springн┤┬вио╬Ш: 2. [文件] spring源码分析之AOP.txt ~ 15KB     下载( ...

  9. Memcache 和 Radis 比较

    Memcache 和 Radis 比较 2014-03-28 11:00 2447人阅读 评论(0) 收藏 举报  分类: memcache(6)  Redis(7)  版权声明:本文为博主原创文章, ...

  10. 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 ...