原因 :  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(三)-父子组件通信的更多相关文章

  1. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  2. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  3. Vue的父子组件通信(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  4. vue.js父子组件通信动态绑定

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

  5. 详解Vue 非父子组件通信方法(非Vuex)

    假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...

  6. 用Vue的父子组件通信实现todolist的功能

    先上代码 <body> <div id="root"> <div> <input v-model="inputValue&quo ...

  7. vue之父子组件通信

    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...

  8. vue组件详解(三)——组件通信

    组件之间通信可以用下图表示: 组件关系可分为父子组件通信.兄弟组件通信.跨级组件通信. 一.自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件. 子组件用$emit ()来触发事件,父组件 ...

  9. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

随机推荐

  1. kaldi 运行voxforge例子

    ---------------------------------------------------------------------------------------------------- ...

  2. vs2012升级vs2017后的一些坑

    异常信息:未能加载文件或程序集"System.Web.Helpers... 未能加载文件或程序集"System.Web.Helpers, Version=2.0.0.0, Cult ...

  3. python 按照一个字典的值来对这个字典进行排序

    old_dic = {'a':6, 'b':3, 'c':2, 'd':4, 'e':5, 'f':1}new_dic = sorted(old_dic.items(), key=lambda d:d ...

  4. 埃航和737MAX坠毁:软件优先级问题

    事件背景: 2019年3月10日,埃塞俄比亚航空公司一架波音737MAX8飞机发生坠机,机上157人全部遇难,包括8名中国公民.这是继去年10月29日印尼狮航空难事故之后,波音737MAX8飞机在五个 ...

  5. Express中间件的意思 next()的方法

    一.什么是express?Express是一个简洁.灵活的noode.jsWeb应用开发框架,它提供一系列强大的特性,帮助你创建各种Web和移动设备应用.Express项目的底层由许多的中间件在协同工 ...

  6. vue 项目实战 (入门)

    环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...

  7. 从零基础到拿到网易Java实习offer,谈谈我的学习经验

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  8. Java 容器 & 泛型:四、Colletions.sort 和 Arrays.sort 的算法

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 本来准备讲 Map集合 ,还是喜欢学到哪里总结吧.最近面试期准备准备,我是一员,成功被阿里在线笔试秒杀 ...

  9. 【API知识】RestTemplate的使用

    前言 在某种情况下,后台服务可能需要访问另一台服务器的REST接口.以前估计不少人用的都是HttpRequest类来着,结合Paser解析JSON格式的Body.现在Spring Boot的Web S ...

  10. ubuntu搭建nodejs生产环境——快速部署手册

    为什么不用CentOS而用Ubuntu作为生产环境的运行平台?这个我也比较好奇,公司订的只能沿用传统,从使用成本的角度来说,此举也是值得肯定的. 测试环境 腾讯云 Ubuntu 16.04 阿里云 U ...