vue(三)-父子组件通信
原因 : Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
props 父组件给子组件传递数据
props:作用是父组件给子组件传递数据。
语法:参考《vue(二)-父子组件语法》。
注意要点:
1: 子组件要显式声明需要哪些数据。语法:
props{
item:{
default(){
return
}
}
}
2:从父组件用props传进来的数据,一般不要改动,因为改动之后,父组件中数据也变了,但是(敲黑板),好像vue新版本已经修改了这个。没有验证,请谨慎修改。
3:父组件在使用子组件时候,要用v-bind来绑定数据(下图)。将子组件的items绑定到父组件的item数据中。

$emit 子组件给父组件传递数据 参考文档https://cn.vuejs.org/v2/api/#vm-emit
语法:

子组件中写法:
html:使用click调用submit方法。

js:在submit方法中,使用$emit来讲this.items数据,传递给transferSubmit方法,这是一个自定义的方法。

父组件中写法:
html: 使用transferSubmit方法,调用getItems方法。

js:getItems中参数,就是从子组件中传进来的。

子组件给子组件传递数据
vue没有直接自对子传数据的方法。可以参考vue提供的Vuex。
参考文章:http://www.cnblogs.com/wisewrong/p/6266038.html 作者:WiseWrong
vue(三)-父子组件通信的更多相关文章
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- Vue的父子组件通信(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue.js父子组件通信动态绑定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 详解Vue 非父子组件通信方法(非Vuex)
假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...
- 用Vue的父子组件通信实现todolist的功能
先上代码 <body> <div id="root"> <div> <input v-model="inputValue&quo ...
- vue之父子组件通信
一. 父-子组件间通信 let children={ template:`<div><h1>{{send}}</h1></div>`, # 将传 ...
- vue组件详解(三)——组件通信
组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
随机推荐
- mvc网站迁移.net core记录
接口return Json()时序列号小写的问题 在Startup.cs->ConfigureServices方法配置一下解决 public void ConfigureServices(ISe ...
- 使用Nginx+Uwsgi部署Python Flask项目
第一次用Flask做Web(也是第一次用Python做Web),在部署的时候遇到了不少问题,现在将过程就下来,供在这方面也有疑惑的人参考.(PS:使用Apache+mod_wsgi部署模式的可以参考另 ...
- Python遍历List集合四种方法
这篇文章主要介绍了Python 列表(List) 的四种遍历方法实例 详解的相关资料,需要的朋友可以参考下 分别是:直接遍历对象 通过索引遍历 通过enumerate方法 通过iter方法. 使用Py ...
- C#zip压缩类
改造了网上的代码,可以压缩文件夹.指定文件列表(文件和文件夹的混合列表,需要指定子文件夹下需要压缩的文件),注释很详细不做解释 public class ZipHelper { /// <sum ...
- JVM和GC垃圾回收机制和内存分配
JVM运行期间 线程共享 线程私有 线程共享: 方法区 堆方法区:存放可以共享数据,静态常量,类的共有方法属性字段等,可以共享的存在方法区. 堆:存放class对象 . 线程私有:本地方法栈 虚拟机栈 ...
- Python中的高级变量类型
高级变量类型 目标 列表 元组 字典 字符串 公共方法 变量高级 知识点回顾 Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (int) 浮点型(float) 布尔型(bool) ...
- Node.js项目拆包工程化
背景 在我们开发的过程中,经常会遇到这样的问题,开发完了一些代码或者一个接口,别的小伙伴过来问你,代码可不可以给他复用,接口可以给他调用.这说明代码的复用和抽象对团队协作是很重要的.举个例子,如下图 ...
- npm包实现发布正式和测试版
npm publish的時候 怎麽發測試版和正式版本呢? 通常我們一般情況下 直接 npm publish 提交自己的開發包后,在項目中 npm install @packageName 是下載下來剛 ...
- Zabbix系列之五——监控TCP端口
监控端口的几个主要Keys: net.tcp.listen[port] Checks if this port is in LISTEN state. 0 - it is not, 1 - it is ...
- pyinstaller安装配置
一.工具准备: 1).安装pyinstaller需要以这个包为基础.也就是基础软件包.pyWin32包.下载对应的pyWin32安装包>>地址: https://sourceforge.n ...