父组件的数据传递到子组件:

子组件:(其中fMsg是要从父组件传递过来的数据,注意fMsg要在子组件props里先定义)

父组件:(使用v-bind,将自身数据绑定给中转属性fMsg,从而通过 子组件props中的fMsg,将父组件中msg的值传递给了子组件。)

子组件将数据传递到父组件:(子组件是通过触发父组件中的方法从而传值到父组件)

子组件:(下方是子组件中定义的一个方法,触发该方法后可通过$emit触发中转函数func,并传递参数,此处为传递了两个参数)

父组件对子组件引用时,使用v-on绑定中转函数func,用showChange()方法接收子组件传递来的数据,此处接收到由子组件传来的num.content和num.id两个数据

也就是说,子组件向父组件传值的同时,也触发了父组件中的方法,达到了对父组件中方法的调用。

父组件调用子组件中的方法

这里的loadNote()是定义在子组件中的方法,现在可以在父组件中进行调用

可参考内容:https://blog.csdn.net/sinat_17775997/article/details/61192359

其他的组件信息传递的方式:

1、中央事件总线bus

2、父链 this.$parent.message = "sth"; 这一操作修改了父组件中的message

3、子组件索引 使用this.$children在子组件较多时很不方便,因此使用子组件索引,在父组件中引用子组件时,给子组件指定一个索引名称 ref = “comA”

var msg = this.$refs.comA.message;  获取到ref属性值为comA的子组件的message值,

4、当项目比较大,建议使用vuex来进行状态管理

5、slot,一般情况下,父组件引用子组件时只需在模板中写上子组件的空标签,如:

<template>

<child-comp></childcomp>

</template>

如果给子组件签中增加别的内容,这些内容会被子组件自身的模板内容覆盖掉,这种情况下,如果子组件模板中含有slot空标签,则父组件写在子组件标签中的内容,会被分发到子组件的slot中去。如果需要分发多个内容,可以给slot指定name属性,如

子组件(child-comp)中:

<template>

<div>

<p>其他内容</p>

<slot name="slot1"></slot>

</div>

</template>

父组件中:

<template>

<child-comp>

<p slot="slot1">要分发给name值为slot1的slot的内容</p>

</child-comp>

</template>

展示结果应为:

其他内容

要分发给name值为slot1的slot的内容

VUE组件间数据方法的传递,初步了解的更多相关文章

  1. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  2. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  3. vue组件间的数据传递

    父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据.   App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...

  4. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  5. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  6. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  7. vue组件间通信六种方式(完整版)

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  8. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  9. webpack+vue 组件间传参(单一事件中心管理组件通信--$root),如果有路由的话会失效

    先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...

随机推荐

  1. Java Queue之PriorityQueue

    PriorityQueue位于Java util包中,观其名字前半部分的单词Priority是优先的意思,实际上这个队列就是具有“优先级”.既然具有优先级的特性,那么就得有个前后排序的“规则”.所以其 ...

  2. torch画散点图

    import torch from torch.autograd import Variable import torch.nn.functional as F import matplotlib.p ...

  3. nginx日志的监控【转】

    第一:nginx的基础监控: 1.进程监控 2.端口监控 在这里nginx的基础监控就不详细说了,注意的是:这两个是必须要加的.并且对于zabbix而言的话,一定要加上触发器的.有问题必须报警. 第二 ...

  4. codeforces 915E - Physical Education Lessons 动态开点线段树

    题意: 最大$10^9$的区间, $3*10^5$次区间修改,每次操作后求整个区间的和 题解: 裸的动态开点线段树,计算清楚数据范围是关键... 经过尝试 $2*10^7$会$MLE$ $10^7$会 ...

  5. Linux下安装VMware Tools(使虚拟机支持文件拖拽)

    如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...

  6. 【原创】大数据基础之Spark(3)Spark Thrift实现原理及代码实现

    spark 2.1.1 一 启动命令 启动spark thrift命令 $SPARK_HOME/sbin/start-thriftserver.sh 然后会执行 org.apache.spark.de ...

  7. selenium之 webdriver与三大浏览器版本映射表(更新至v2.29)

    1.chrome浏览器 chromedriver版本 支持的Chrome版本 v2.29 v56-58 v2.28 v55-57 v2.27 v54-56 v2.26 v53-55 v2.25 v53 ...

  8. web开篇

    一.内容回顾 1.python基础 2.网络编程 3.并发编程 4.前端 5.数据库(MySQL) 二.今日概要 1.了解Web应用程序的本质 2.Django简介及安装使用 三.今日详细 1.最简单 ...

  9. .net core 2.x - 日志 - to elasiticsearch

    记录日志到elasticsearch(es),下面简写es,然后我们可以通过kibana可视化的观察日志信息以及统计分析等. 1.起源 年中旬时候,公司有个需求是需要分析用户的地址,需要先分词处理然后 ...

  10. python输入

    (程序是如何输入输出的) 先了解一个概念,什么是函数? 简单来说,函数就是封装了一些功能,到时候只需要写一个函数名字,就可以使用这些功能 input函数,它是输入函数,它可以将用户输入的内容当做“字符 ...