VUE组件间数据方法的传递,初步了解
父组件的数据传递到子组件:
子组件:(其中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组件间数据方法的传递,初步了解的更多相关文章
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- vue组件间的数据传递
父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...
- 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- vue组件间通信六种方式(完整版)
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- webpack+vue 组件间传参(单一事件中心管理组件通信--$root),如果有路由的话会失效
先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...
随机推荐
- python 读写文件中 w与wt ; r与rt 的区别
w,r,wt,rt都是python里面文件操作的模式.w是写模式,r是读模式.t是windows平台特有的所谓text mode(文本模式),区别在于会自动识别windows平台的换行符.类Unix平 ...
- Django组件-forms
forms组件 校验字段功能 针对一个实例:注册用户 模型:models.py class UserInfo(models.Model): name=models.CharField(max_leng ...
- Python-Django 模型层-多表查询
多表操作 基于对象的跨表查询(多次查询) 一对一: -正向查询按字段 -反向查询按表名小写 一对多: -正向查询按字段(正向查询一定会查出一个来) -反向查询按表名小写_set.all()(返回结果是 ...
- JavaScript入门学习笔记(二)
JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...
- 20165314 [第二届构建之法论坛] 预培训心得(Java版)
安装IDEA配置JDKsourcepath啥的之前已经弄好了 克隆项目 emmm这次的代码托管部分好像比之前做的要简单,之前还要git config啥的,还有就是git clone不会提示要输入账号密 ...
- 指针数组&数组指针
数组指针(也称行指针) 定义 int (*p)[n]; ()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的长度是n,也可以说是p的步长.也就是说执行p+1时,p要跨过n个整型数 ...
- Codeforces 750E New Year and Old Subsequence 线段树 + dp (看题解)
New Year and Old Subsequence 第一感觉是离线之后分治求dp, 但是感觉如果要把左边的dp值和右边的dp值合起来, 感觉很麻烦而且时间复杂度不怎么对.. 然后就gun取看题解 ...
- Eclipse4.8.0的svn插件离线安装说明
Eclipse4.8.0离线安装Subclipse(SVN插件)的方法: Subclipse迁到github上了,地址:https://github.com/subclipse/subclipse/w ...
- Android键盘显示和隐藏
一.不自动弹出键盘: 带有EditText控件的在第一次显示的时候会自动获得focus,并弹出键盘,如果不想自动弹出键盘,有两种方法: 方法一:在mainfest文件中把对应的activity设置 a ...
- loadrunner之java user脚本开发
脚本开发环境: loadrunner11.0 jdk1.6.32_x86_32 脚本开发 1.选择JavaVuser协议 2.配置java环境(Vuser--RunTime Settings) 3.开 ...